スポンサードリンク

Tag Archives: サンプル

Google Mapデモ

◆Google Maps JavaScript API V3 Example(Demo)一覧

 

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

 

Google Map使い方

◆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

データベースから地図の中心より半径(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 を試す。

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

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

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

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

Read more »

PHP+MySQL(XMLファイル生成)+Google Maps API V3/地図表示サンプル

とりあえずMySQLからデータを引っぱって表示させてみた。 せっかくなので、Googelコードを試す。参照ページは「Google マップと PHP/MySQL を使用」。このページ、以前はV2だったが、V3用に変わっていた。下記サンプル地図の表示マーカー数は、172マーカー。ちと重いかな。 iPhone(アイフォン)でサンプル地図をWi-Fiでなく3G回線で読み込んでみたが、まあ動くでないの。Google Maps API V3のスマートフォン対応恐るべし。次回は、MarkerClusterer+PHP+MySQL(XMLファイル生成)+Google Maps API V3を練習する予定。 ◆Script記述 Read more »

Web(ウェブ)タブ検索ボックス/Google AJAX Search API サンプル

◆サンプル


 

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から作成してみる

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

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

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

◆PHP+MySQL

◆アイコン、マーカ

◆インフォウィンドウ(吹き出し)

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

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

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

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

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

    スポンサードリンク