Google Maps APIを使ってみる

久々の更新です。

仕事の中でGoogle Map APIを使ったマップ表示する機会があったので、覚書も兼ねて書いてみようと思います♪

まずこのチュートリアルを参考に以下のランドマークタワーのマップの表示を試してみました。

横浜ランドマークタワーのマップ

ソースは以下の通り

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">// <![CDATA[
function initialize() {
    var latlng = new google.maps.LatLng(35.455239, 139.631084);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
    title:"ここが横浜のランドマークタワー"
  });
  }
// ]]></script>

Google Maps APIを読み込み


ウィンドウの指定?(viewportに関して曖昧です^^;)とGoogle Maps Javascript APIを読み込んでます。

表示する場所とサイズの指定


識別するためのidと表示するサイズをここで指定。

マップオブジェクトを作る

次に表示する場所やマーカーなどを指定するオブジェクトをheadタグ内に記述(外部ファイルから読み込んでもOKですよ)。

  function initialize() {
    var latlng = new google.maps.LatLng(35.455239, 139.631084);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
    title:"ここが横浜のランドマークタワー"
  });
  }

latlngという変数にマップに表示する経度・緯度を代入して指定。
経度・緯度はGeocodingで住所から検索できます。

次にmyOptionsという変数にズームの指定、中心となる経度・緯度、表示するマップのタイプを代入して指定。
ズームを16(数字が大きいほど拡大されます)、latlngの変数に代入した位置を中心にして、マップのタイプをHYBRID(航空写真+通常のマップ表示)にしています。
マップのタイプはこちらを参考にしてください。

そしてmarkerという変数にマーカーの表示位置、マップを配置するオブジェクト、マーカーにホバーした際に表示するテキストを代入し指定。
位置は自由に経度・緯度で指定できるけど、今回は中心と同じ位置にしてます。

オブジェクトをページ読み込み時に実行する

上記の感じでJavascriptでオブジェクトが出来たら、


と、ページを読み込んだ際にメソッドを実行すればMapの表示完了です。

いかかがでしたか?
リファレンスを少し噛み砕いた感じで書いたんですが、なおさら分かりにくくなったかもです(文章能力低いので^^;)

会社やイベントなどのアクセスマップを表示する時など、結構使えると思うので覚えておいて損はないかもですね♪