ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

Google Map API v3を触ってみての結構関数が変わっているのでメモ書き。

１．いろんなブログで書かれていますが、Google Map API Keyが必要なくなりました。
v3にする方法はheadタグ内に以下を記述するだけ。

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

sencorはtrueかfalseを選びます。GPS機能が使える機器（iPhoneなど）で、かつ位置情報を取得したい場合は「true」、普通のパソコンで表示するような場合は「false」で良いようです。

※すでにv2の呼び出しが記述されている場合は

<script src="http://maps.google.com/maps?file=api&amp;v=2&key=（APIキー）" type="text/javascript"></script>

を削除してください。

２．マップ表示とマーカー表示の順番に注意。
マップを表示→マーカーを表示の順で記述しないと、マーカーが表示されない。
どうしてもマーカーの表示→マップの表示という順にしなくてはならない場合は、とりあえず初期値を適当に決めてマップを表示の記述をしたあと、setCenterとsetZoomで設定しなおしましょう。

/*
マップ表示の記述
*/

//マップ表示エリアのオブジェクト
var mapdiv = document.getElementById("map");

// とりあえず初期設定
LatLngCenter = new google.maps.LatLng(緯度, 経度);
zoom = ズーム値;

//マップオプション
var map_option = {
    center: LatLngCenter,
    zoom: zoom,
    mapTypeId: google.maps.MapTypeId.ROADMAP   // マップタイプ
};

//マップ表示
var map = new google.maps.Map(mapdiv, map_option);

 

/*
マーカー表示の記述
*/

// マーカー表示
var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(緯度, 経度)
});

//情報ウィンドウ描画
var popup = new google.maps.InfoWindow({
    content: "吹き出しのコメントをここに記述します"
});
  
//マーカーをクリックした場合、吹き出しを表示
google.maps.event.addListener(marker,"click",function(){popup.open(map, marker);});

 

～～～中心座標とズーム値を取得する記述～～～

 

/*
マップの中心座標とズーム値の再設定
*/

LatLngCenter = new google.maps.LatLng(緯度, 経度);
map.setZoom(zoom);
map.setCenter(LatLngCenter);

※「～～～中心座標とズーム値を取得する記述～～～」の部分に中心座標とズーム値を取得するプログラムを書いてください。

以上のように「マップの表示→マーカーの表示→マップの設定」という風にすればOKです。

今回参考にさせていただいたサイト

Google Maps API Version3 日本語ドキュメント(非公式)：該当記事「Google Maps API Version3 イベント」

同上：該当記事「Google Maps API version 3 リファレンス」

Life with IT：該当記事「TOKYO ART LIFE」のGoogle Maps API V3対応」

マツオソフトウェアブログ：該当記事「Google Maps APIのV2をV3へ移行する」