Google Maps API カスタマイズの仕方・方法

豆知識ネット


ディレクトリ検索

Googleの便利な機能

前ページで Google maps API を使った基本的な地図の表示の仕方を解説しました。
今回は、「マーカーと情報ウィンドウ(ポップアップ)」の表示の仕方など少しカスタマイズします。

マーカーと情報ウィンドウ

地図上の任意の位置にマーカーを表示させる事が出来ます。
また、マーカーをクリックしたら表示(ポップアップ)される情報も追加できます。

前ページでヘッダーに記述した下記のコードの下へ追加します。
var map = new google.maps.Map(mapdiv, myOptions);

【追加コード】
var marker = new google.maps.Marker({
position: new google.maps.LatLng(緯度, 経度),
map: map,
title: 'マーカーのタイトル'
});

※「緯度・経度」を記述し、マーカーのタイトルを任意に記述します。

マーカーをクリックしたら表示される情報を追加するには上記のコードに続けて下記のコードを追加します。

var infowindow = new google.maps.InfoWindow({
content: '情報ウィンドウ内に表示される情報を記述',
size: new google.maps.Size(幅, 高さ)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

※情報ウィンドウ内に表示される情報は、aタグで外部リンク、brタグ で区切れば改行ができ HTMLタグで記述できます。

今回は、基本的な Google maps API のカスタマイズを解説しましたが、新機能の詳しい解説は、「Google maps API」 のドキュメントをご参照下さい。

Google maps API の基本

ワンポイント

Googleより「Google Map JavaScript API バージョン3は正式な JavaScript APIとなり、JavaScript API 2は、Googleの廃止ポリシーにより正式に廃止されました」と報告がありました。
また、アップデートなど新しいバージョンにコードを移行する事を推奨しています。

ブックマーク

はてなブックマーク追加 MyYahoo 追加 delicious ブックマーク追加 livedoor クリップ追加 google ブックマーク追加 buzzurl ブックマーク追加 nifty クリップ追加