メルです。
Google Maps JavaScript API v2の提供が
2013年11月18日で終了となりｖ3へ移行しました。
これに伴い、
「今まで表示できていたGoogleMapが表示されなくなった」などの
お問い合わせが、何故かここの所多いです。
見れなくなっていた事に最近になって気付いた方も多いのでしょうかね？
GPoint(lng, lat)、centerAndZoom() を筆頭に使えなくなった関数が
多数あるため2013年11月18日以降は地図が表示されなくなったようです。
今現在でも動いている物に関しては、当面はそのままでも大丈夫ですが、
早めにV3に切り替えたほうが良いでしょう。
Google Maps API V3の書き方
Google Maps JavaScript API v3 参考。
Google Maps API V3のサンプルソース
<head>～</head>内に以下を記述
//Google Maps APIを読み込む
<script src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
// Google Mapsで利用する座標
var latlng = new google.maps.LatLng(35.710053, 139.810724);
var mapOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
// GoogleMapsの生成
var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
// マーカーを生成
var gmarker = new google.maps.Marker({
map: gmap,
position: latlng,
title: "タイトル"
});
// 噴出しの生成
var infoWindow = new google.maps.InfoWindow({
content: "噴出しの内容",
maxWidth: 400
});
// マーカーのクリック時に噴出し標示
google.maps.event.addListener(gmarker, 'click', function(event) {
// 情報ウィンドウの表示
infoWindow.open(gmap, gmarker);
});
// ロード時に噴出しを表示
google.maps.event.addListenerOnce(gmap, 'tilesloaded', function () {
// 情報ウィンドウの表示
infoWindow.open(gmap, gmarker);
});
}
</script>
■Google Maps APIを読み込む（2行目）
<script src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8" type="text/javascript"></script>
V3からAPIキーを取得しなくてもGoogleMapsが使えるように
なりましたので気軽に使えるようになりました。
sensorは、位置情報を取得するのにセンサー（GPSなど）を
使用するかどうかを示します。
true：使用する
false：使用しない
■Google Mapsを表示した時の初期の座標を指定（8行目）
var latlng = new google.maps.LatLng(35.710053, 139.810724);
緯度と経度を記入します。
地図から座標を取得したい場合はこちらの MAP をお使い下さい。
■Google Mapsを表示した時の初期のズーム値（11行目）
zoom: 18,
数字が大きいほど拡大表示されます。
通常は12～18くらいの間で見ながら調整すれば良いと思います。
■マーカーに表示される噴出しの内容（28行目）
content: "噴出しの内容",
HTMLタグが使えます。
（29行目）
maxWidth: 400
噴出しの最大横幅を、上記をpx指定する事で調整出来ます。
HTMLへの読み込みと表示
<body>内に以下を記述
<body onload="initialize()" /> <div id="map" style="width: 620px; height: 600px"></div> </body>
■ページ読み込み時にGoogle Mapsの関数を読み込みます。（1行目）
<body onload="initialize()" />
■地図の表示とサイズ（2行目）
<div id="map" style="width: 620px; height: 600px"></div>
id="map"指定した場所に地図が表示されます。
地図の大きさは、スタイルシートで指定します。
ほとんどコピペでいけると思いますので一度やってみてください。
ネットビジネス速報メールマガジン
メルのネットビジネス速報では、悪質高額塾などの被害が拡大しないように
新しい悪質販売者の情報が入り次第、速報でお伝えいたします。
Dreamweaver、Fireworks、PhotoshopなどのTipsやチュートリアルの紹介、
最新SEO情報、その他ネットビジネスに関する情報をいち早く配信しています。
