スポンサードリンク

Category Archives: Google Maps APIサンプル(example)

XMLファイルを読み込んでGoogle Mapsを表示

とても便利なXMLファイル、マーカー情報をまとめて書いてダウンロードして、Google Maps で表示させましょう。

◆用意するのは

  • XMLファイル(UTF8で記述)
  • Script記述
  • HTMLだけ

◆XML記述

<markers>

<marker lat=”37.427770″ lng=”-122.144841″/>

<marker lat=”37.433480″ lng=”-122.139062″/>

<marker lat=”37.445427″ lng=”-122.162307″/>

</markers>

Read more »

広告表示が無いLocal Search(Google ローカル検索)窓(バー)をGoogle AJAX Search APIで追加する。

V3用検索Google barは、コチラ

前回のローカル検索バーサンプルでは、広告が表示されるのが気に食わなかったので探してみたのが、今回のローカル検索。

Google AJAX Search APIを使用しますのでちょいと手間。ですが広告は表示されなくなりスッキリ。

今回のGoogle Maps API作業は、次の作成。

  1. Google Maps APIキー以外に、新たにGoogle AJAX Search APIキーを入手し、Google Maps APIキーと併せてHTMLへ記述しておきます。APIキーは、ここの”Google AJAX Search API の使用を開始する”で入手。
  2. さらに、スタイルシートなんぞの記述もHTML header内への記述が必要です。
  3. 併せて、距離スケール定規が隠れてしまっているので、var positionを指定して、Google検索窓の表示位置も地図左下から右下に変えてみましょうかね。

Read more »

Youtube 動画を吹き出し(情報ウィンドウ/インフォウィンドウ)に表示するサンプル/Google Maps API

Google Maps V3用はコチラ

Google Maps の地図上で、アイコン(マーカー)をマウスクリックするとYoutube 動画を吹き出し(インフォウインドウ)に表示するサンプルです。
◆HTMLサンプル

<body onload=”load();onunload=”GUnload();“>
<div id=”map100″>Loading…</div>

Read more »

マーカー(アイコン)の種類を変更する/Google Maps API

Google Maps API V3は、コチラの記事へ

アイコン・マーカの表示の変更

このサンプルマップ、マーカがただの赤い丸じゃつまらないので、Google Maps 標準アイコン(マーカー)以外にもいろいろ変更を試してみる。

Google Maps API v3は、コチラ

アイコンとマーカーの一覧表

公園以外にもいろいろ作成したい場合は、こっちのアイコン(マーカー)一覧表からコピーして変更してみて下さい。

カスタムアイコン用の影は、ここで作成できます。

HTML Script

ココでは、ただの標準マーカーだった赤いアイコンを、公園を示す緑色の木のマーカーへ変更する。

変更箇所は、赤文字部のみ

Read more »

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

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

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

    スポンサードリンク