そろそろ確認！Google Map API V3 への移行は済んでますか？

Web制作ツール

2013.02.25

寒い！最近の状況を説明するにはひと言で十分。
寒い！！kimoto です。

Google Map を自分のサイトに埋め込めることができる Google Maps API。
現在の最新バージョンは v3 なのですが、一つ前の v2 のサポートが今年の5月に切れます。（v2 のマニュアルにも注意書きがあります）
※ 2/26追記：正確にはサポートが切れたのは2010年の5月で、2013年の5月までは動作を保証する、という事だそうです。つまり、それ以降は動作の保証が無くなるということですね。

もし API を利用している方はバージョンが幾つか確認し、v2 であれば早急に v3 に移行することをおすすめします。

てことで、v3 の設置の仕方を簡単に説明しようとおもいます。

読み込み

読み込むコードはこちら。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

「sensor」は、GPS などを使うかどうかの値になります。
通常の PC 用 Web サイトの場合は「false」にしておきます。
スマホサイトなどの場合、こちらを「true」にしておけば、位置情報を使うことができます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

ここまででお気づきの方もいると思いますが、v3 では API キーがいりません。
アカウントを作る必要がなくなる分、かなり敷居も低くなると思います。

表示エリア

こちらの書き方は v2 と変わりません。

<div id="map" style="width : 530px; height : 300px;"></div>

地図の設定などの Javasvript

具体的な設定はこのようになります。

  google.maps.event.addDomListener(window, 'load', function() {
    var map = document.getElementById("divのid");
    var options = {
      zoom: "任意のズーム",
      center: new google.maps.LatLng("緯度", "経度"),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    new google.maps.Map(map, options);
  });

最低限の設定はこんな感じです。実際の値を入れてみるとこんな感じになります。

  google.maps.event.addDomListener(window, 'load', function() {
    var map = document.getElementById("map");
    var options = {
      zoom: 16,
      center: new google.maps.LatLng(35.447068, 139.634437),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    new google.maps.Map(map, options);
  });

これで設置完了。

マーカーを載せる

マーカオブジェクトを作成し、それを設置する流れです。
とりあえずデフォルトのマーカーを設置してみます。

var marker = new google.maps.Marker({
  position: latlng,
  map: map

こんな感じ。

実際に地図を設置する

これを実際に設置するコードはこんな感じ。

    google.maps.event.addDomListener(window, 'load', function() {
        var lat = 35.447068;    // 緯度
        var lng = 139.634437;   // 経度
        
        var latlng = new google.maps.LatLng(lat, lng);  // 緯度経度
        
        var map = document.getElementById("mapDiv");    // 地図の場所
        
        // 地図のオプション
        var options = {
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // 地図オブジェクト
        var mapObj = new google.maps.Map(map, options);

        // マーカー設置
        var marker = new google.maps.Marker({
          position: latlng,
          map: mapObj
        });
    });

そして実際にはこんな感じで表示されます。

今回は、基本的な設置のみ解説しました。
次回に、もうすこし細かい解説をしていきます。

あ、ちなみに地図の位置は弊社シーブレインの位置です。いい場所でしょう？
どうですか、一緒に働いてみませんか？