ishikawaGoogle Maps APIを使って複数のマーカーと吹き出しを設置してみる
Google Maps APIを使って、地図を表示したりマーカーを立てたりをやってみます。
今回使用するのは、以下のJavaScript API になります。
Google Maps JavaScript API | Google Developers
■目次
1. Google マップの表示
まずは地図を埋め込んでみます。
実際に使用する場合はAPIキーを取得したほうがよいですが、今回は動作の確認ができればよいので省略します。
APIキーを使用する場合は、こちらからAPIを有効にして、APIキーを作成して下さい。
1-1. 地図を埋め込む場所を指定
■HTML
<div id="sample"></div>
1-2. jsファイルの読み込み
</body>の直前にjsファイルを読み込ませます。
■HTML
<script src="./sample.js"></script> <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
sample.jsに処理を追加していきます。
2行目で読み込んでいるのがGoogle Maps APIで、パラメータのcallback=initMapは、APIが読み込み後にinitMap()を実行するという意味になります。
1-3. 地図のCSSを指定
地図に対してサイズの指定がないと表示されませんので、#sampleにwidthとheightを指定しておきます。
■CSS
#sample {
width: 700px;
height: 400px;
}
1-4. 地図の埋め込み
initMap()を使って、sample.js内に地図を埋め込む記述を追加します。
■JavaScript
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
center: { // 地図の中心を指定
lat: 34.7019399, // 緯度
lng: 135.51002519999997 // 経度
},
zoom: 19 // 地図のズームを指定
});
}
これで地図の埋め込みができました。
実際のソースコード一式はサンプルページをご確認ください。
2. Google マップにマーカーを立てる
先ほど埋め込んだ地図に、マーカーを立ててみます。
initMap()内にマーカーを立てる記述を追加します。
■JavaScript
var map;
var marker;
var center = {
lat: 34.7019399, // 緯度
lng: 135.51002519999997 // 経度
};
function initMap() {
map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
center: center, // 地図の中心を指定
zoom: 19 // 地図のズームを指定
});
marker = new google.maps.Marker({ // マーカーの追加
position: center, // マーカーを立てる位置を指定
map: map // マーカーを立てる地図を指定
});
}
地図の中心とマーカーを立てる位置の緯度経度が同じなので、変数で指定するように変更しています。
サンプルページ2
3. マーカーに吹き出しを追加する
先ほど追加したマーカーをクリックしたときに、吹き出しが出るようにしてみます。
■JavaScript
var map;
var marker;
var infoWindow;
var center = {
lat: 34.7019399, // 緯度
lng: 135.51002519999997 // 経度
};
function initMap() {
map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
center: center, // 地図の中心を指定
zoom: 19 // 地図のズームを指定
});
marker = new google.maps.Marker({ // マーカーの追加
position: center, // マーカーを立てる位置を指定
map: map // マーカーを立てる地図を指定
});
infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
content: '<div class="sample">TAM 大阪</div>' // 吹き出しに表示する内容
});
marker.addListener('click', function() { // マーカーをクリックしたとき
infoWindow.open(map, marker); // 吹き出しの表示
});
}
19～21行目の吹き出しの追加だけでは吹き出しが表示されないので、22～24行目でマーカーにイベントを追加して、クリックすると吹き出しが表示されるようにしています。
サンプルページ3
4. 住所から緯度と経度を調べる
これまで緯度と経度を使って地図を表示してきましたが、実際に使う場合は住所しか分からないことがほとんどです。
調べる方法はいろいろありますが、今回はジオコーディングを使って調べてみます。
4-1. 住所から緯度と経度を調べる
まずはジオコーディングを使って調べてみて、結果をconsoleに表示してみます。
■JavaScript
var geocoder;
function initMap() {
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': '東京都千代田区神田小川町3-28-9' // TAM 東京
}, function(results, status) { // 結果
if (status === google.maps.GeocoderStatus.OK) { // ステータスがOKの場合
console.group('Success');
console.log(results);
console.log(status);
} else { // 失敗した場合
console.group('Error');
console.log(results);
console.log(status);
}
});
}
consoleに結果が表示されているのを確認できました。
サンプルページ4
4-2. 調べた結果を使って、地図とマーカーを表示
ジオコーディングで調べた結果を使って、地図とマーカーを表示してみます。
■JavaScript
var map;
var marker;
var geocoder;
function initMap() {
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': '東京都千代田区神田小川町3-28-9' // TAM 東京
}, function(results, status) { // 結果
if (status === google.maps.GeocoderStatus.OK) { // ステータスがOKの場合
map = new google.maps.Map(document.getElementById('sample'), {
center: results[0].geometry.location, // 地図の中心を指定
zoom: 19 // 地図のズームを指定
});
marker = new google.maps.Marker({
position: results[0].geometry.location, // マーカーを立てる位置を指定
map: map // マーカーを立てる地図を指定
});
} else { // 失敗した場合
alert(status);
}
});
}
緯度と経度のデータはresults[0].geometry.location で取得しています。
サンプルページ4-2
5. Google マップに複数のマーカーを立てる
マーカーを複数立てる場合、一つ一つ設定していってもよいのですが、数が多い場合は少し面倒です。
そこで、マーカーの緯度や経度などをまとめたデータを取得して、地図上に表示する処理を作ってみます。
今回はjs内に配列で置く方法で試してみます。
■JavaScript
TAM 東京と最寄駅にマーカーを立ててみます。
その際、TAM 東京だけマーカー画像を変更してみます。
var map;
var marker = [];
var infoWindow = [];
var markerData = [ // マーカーを立てる場所名・緯度・経度
{
name: 'TAM 東京',
lat: 35.6954806,
lng: 139.76325010000005,
icon: 'tam.png' // TAM 東京のマーカーだけイメージを変更する
}, {
name: '小川町駅',
lat: 35.6951212,
lng: 139.76610649999998
}, {
name: '淡路町駅',
lat: 35.69496,
lng: 139.76746000000003
}, {
name: '御茶ノ水駅',
lat: 35.6993529,
lng: 139.76526949999993
}, {
name: '神保町駅',
lat: 35.695932,
lng: 139.75762699999996
}, {
name: '新御茶ノ水駅',
lat: 35.696932,
lng: 139.76543200000003
}
];
function initMap() {
// 地図の作成
var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成
map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
center: mapLatLng, // 地図の中心を指定
zoom: 15 // 地図のズームを指定
});
// マーカー毎の処理
for (var i = 0; i < markerData.length; i++) {
markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成
marker[i] = new google.maps.Marker({ // マーカーの追加
position: markerLatLng, // マーカーを立てる位置を指定
map: map // マーカーを立てる地図を指定
});
infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
content: '<div class="sample">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容
});
markerEvent(i); // マーカーにクリックイベントを追加
}
marker[0].setOptions({// TAM 東京のマーカーのオプション設定
icon: {
url: markerData[0]['icon']// マーカーの画像を変更
}
});
}
// マーカーにクリックイベントを追加
function markerEvent(i) {
marker[i].addListener('click', function() { // マーカーをクリックしたとき
infoWindow[i].open(map, marker[i]); // 吹き出しの表示
});
}
基本的にはforを使ってマーカーを立てているだけなのですが、クリックイベントはイベント追加時とクリック時で変数iの値が変わってしまいます。
そのため、今回は別の関数内でイベントを追加するようにしています。
サンプルページ5
【参考サイト】
- Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers
- Geocoding Service | Google Maps JavaScript API | Google Developers
- 複数のgoogle.maps.Markerそれぞれに吹き出しをつける
