スポンサードリンク

Tag Archives: サンプル

Google Mapデモ

Posted by 管理人 on 2012年5月5日 10 comments | 90,467 views

◆Google Maps JavaScript API V3 Example（Demo）一覧

 

※本ページのiPhone（スマートフォン端末）用デモを見るには、ブラウザはGoogle Cｈromeを使用して下さい。

 

Google Map使い方

Posted by 管理人 on 2012年4月16日 24 comments | 107,227 views

◆Google Maps JavaScript API V3 ブログ目次

Google Maps API v3とは？　本ブログは判らないところをコツコツ積み重ねました。あくまでご参考にされて下さい。Google Maps APIを扱うことは決して難しいことではないと思います。Google Maps JavaScript API V3のページからスタートするといいと思います。

※V2は、2013年11月以降は使用できなくなります。

 

いきなりサンプル集（example）地図を見るならコチラ

 

event Listenerイベントリスナーで地図（マップ）イベントによりデータベースから都度マーカーを読み込むphp+MySQL

Posted by 管理人 on 2010年12月31日 None comments | 4,851 views

データベースから地図の中心より半径（km）を指定した距離範囲のマーカー（アイコン）を表示するphp+MySQL(その3)

◆ Google Maps API v3 / addListener() イベント ハンドラでデータベースから都度マーカーを読み込む。

さて、地図が動いたらというイベントをマーカーの検索functionへ渡してデータベースから読み込むのですが、その前に、データベースから引っ張ってくる変数を追加。アイコンのイメージを追加・・・等。肉付けしていきます。

最後に、地図に何らかの状態変化イベントが発生したら、地図の中心から入力したkmの範囲のマーカー（アイコン）を再表示させることにします。

イベント通知の登録は、addListener() イベント ハンドラを使用して行うと、Google先生のこのページ「Google Maps JavaScript API V3 のイベント」に書いてあります。

Read more »

Google Maps V3サンプル　Store Locator （店舗検索）+ PHP, MySQL を試す。

Posted by 管理人 on 2010年12月30日 3 comments | 10,893 views

データベースから地図の中心より半径（km）を指定した距離範囲のマーカー（アイコン）を表示するphp+MySQL（その1）

◆ Google Maps API v3 / php+MySQL サンプルStore Locatorを試してみる。

php+MySQLでデータベースから表示させるマーカーを選択する方法の一つとしてGoogle 先生のデモをいじって理解を深めたいと思います。

まず、自分のデータベースを使うので、マーカー座標のある日本に初期座標を変更。データベースは、次のように変数が登録されております。

Read more »

PHP+MySQL（XMLファイル生成）+Google Maps API V3／地図表示サンプル

Posted by 管理人 on 2010年10月31日 2 comments | 12,329 views

とりあえずMySQLからデータを引っぱって表示させてみた。 せっかくなので、Ｇｏｏｇｅｌコードを試す。参照ページは「Google マップと PHP/MySQL を使用」。このページ、以前はＶ2だったが、Ｖ3用に変わっていた。下記サンプル地図の表示マーカー数は、172マーカー。ちと重いかな。 iPhone（アイフォン）でサンプル地図をＷｉ-Ｆｉでなく3Ｇ回線で読み込んでみたが、まあ動くでないの。Google Maps API V3のスマートフォン対応恐るべし。次回は、ＭａｒｋｅｒＣｌｕｓｔｅｒｅｒ+PHP+MySQL（XMLファイル生成）+Google Maps API V3を練習する予定。 ◆Script記述 Read more »

Web（ウェブ）タブ検索ボックス／Google AJAX Search API　サンプル

Posted by 管理人 on 2010年5月25日 None comments | 1,563 views

◆サンプル


 

Loading…


◆下記をコピー

<!– Google AJAX Search API　キー –>

<script src=”http://www.google.com/uds/api?file=uds.js&v=1.0&key=あなたのGoogle AJAX Search APIキー” type=”text/javascript” charset=”utf-8″></script>
<!– 検索結果表示スタイルシート –>

表示を変えたければ、CSSをダウンロードして書き換え方。デフォルト幅は、.gsc-control {  width: 300px;}

<link href=”http://www.google.com/uds/css/gsearch.css” rel=”stylesheet” type=”text/css” />
<!– HTML記述 –>
<div id=”search_control_tabbed”>Loading…</div>
<!– 検索結果タブ設定 –>
<script type=”text/javascript”>
// <![CDATA[
google.load(‘search’, ‘1.0’);
function OnLoad() {
// create a tabbed mode search control
var tabbed = new google.search.SearchControl();
tabbed.setResultSetSize(google.search.Search.LARGE_RESULTSET);
tabbed.addSearcher(new google.search.ImageSearch());
tabbed.addSearcher(new google.search.VideoSearch());
tabbed.addSearcher(new google.search.WebSearch());
tabbed.addSearcher(new google.search.BlogSearch());
tabbed.addSearcher(new google.search.BookSearch());
tabbed.addSearcher(new google.search.NewsSearch());
// draw in tabbed layout mode
var drawOptions = new google.search.DrawOptions();         drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);         tabbed.draw(document.getElementById(“search_control_tabbed”), drawOptions);
tabbed.execute(“フェラーリ“);       }
google.setOnLoadCallback(OnLoad, true);
// ]]></script>

ClusterMarker サンプル用JSONファイルをMySQL+phpから作成してみる

Posted by 管理人 on 2010年5月18日 None comments | 3,455 views

Google Maps APIプロジェクトのClusterMarker サンプルがJSONファイルなるものを使っていた。

いままではXMLファイルにマーカー表示用の情報を直接書き込む方法、それからMySQLデータベースからphpでXMLファイルを生成させる方法を勉強したが、今回のJSONとういうファイルを作成してみる。

さて、JSONとは？

JSONはXMLと違ってマークアップ言語ではないらしい。JSONの記述ルールは次のようなもの・・・・・

  • true,false,null等は小文字とする
  • 数値は、10進法のみ
  • 指数表記はできる。
  • 配列はコンマで区切り、[　　]でくくる。例・・・[“eat”, “run”, “skip”]
  • オブジェクトは、コンマで区切り{        }でくくる。例・・・・{“name”: “ooedo onsen”, “post”: 185}

◆さて、MySQLからJOSNファイルを生成させてみよう

Read more »

Google Maps API v2

Posted by 管理人 on 2010年5月2日 None comments | 2,258 views

◆リバースジオコーディング用マップ（地図）・・・・・座標（経度、緯度）表示。ストリートビュージオコーディング、面積、距離算出も。

◆XMLファイルからマーカーデータを読み込む

◆PHP+MySQL

◆アイコン、マーカ

◆インフォウィンドウ（吹き出し）

◆地図にローカル検索窓を追加する

◆たくさんのマーカー（アイコンを）表示する

座標（経度、緯度）をマップをクリックして座標（経度、緯度）表示！リバース・ジオコーディング！ストリートビューも／Google Maps API

Posted by 管理人 on 2010年5月2日 None comments | 1,684 views

Google Maps でホームページを作成する際に必ずh儀津用となるのが座標（経度、緯度）を調べること。
をマップをクリックして座標（経度、緯度）表示できるように、リバース・ジオコーディングを利用。
また、ストリートビューのyaw、pitch、zoomも必要になるので、併せて利用。

◆リバースジオコーディング用マップ（地図）

    スポンサードリンク