Google Map API を利用して地図上にマーカーを表示する
地図を広げられて「ここです！」といわれても、指をさしたり、何かで印をつけてくれないと、一体どこのことだかわからないですよね。
Google Maps API でも地図上にアイコンをおくことによって、場所を指し示すことができます。
場所を指し示すアイコンをマーカーなどと呼ぶ場合があるので、ここでもマーカーといいます。
地図上にマーカーをおくサンプル
ここで作るサンプルプログラムは次のとおりです。
マーカーが二点おいてあります。
コードは次のとおりです。
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script
type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
points = [
{
"name": 'Disneyland',
"lat": 33.813061,
"lon": -117.918892
},
{
"name": 'Chinese Theatre',
"lat": 34.101556,
"lon": -118.340724
}
];
showMap(points);
});
function showMap(points){
var i, map, mapOptions, lines, bounds, ll;
var latlngs = [];
// 地図の表示オプション
mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(
document.getElementById('map_canvas'),
mapOptions);
// 境界の設定
bounds = new google.maps.LatLngBounds();
for(i=0;i<points.length;i++){
ll = new google.maps.LatLng(points[i].lat, points[i].lon);
latlngs.push(ll);
bounds.extend(ll);
}
map.fitBounds(bounds);
// マーカーの作成
for(i=0;i<latlngs.length;i++){
new google.maps.Marker({
position: latlngs[i],
map: map,
draggable: false
});
}
}
</script>
<div id="map_canvas" style='width:400px;height:300px;'></div>
基本的な部分は Google Map API を利用して地図を表示する と同様です。 先にそちらをざっとみておいてください。違うところを説明していきます。
地図の表示範囲の指定
ここでは２点のマーカーを表示しています。その２点を含む範囲の地図を表示しなければなりません。 ズームをしすぎても２点が見えなくなりますし、かといって引きすぎてもよく見えなくて都合がよくありません。
２点共見える程度に、ちょうど良いくらいの zoom 具合を指定するにはどうすれば良いでしょうか。
これをするには、境界を表す LatLngBounds オブジェクトを利用します。
LatLngBounds の extend メソッドに LatLng オブジェクトを渡すと、その LatLng で示した場所を含むエリアを境界として認識します。
ここでは２点ポイントがありますから、LatLngBounds オブジェクトの extend メソッドにその２点を渡します。
それから Map オブジェクトの fitBounds メソッドにこの境界オブジェクト (google.maps.LatLngBounds) を渡します。 すると、その２点を含むエリアを地図の境界となるように中心点およびズームが設定されます。
マーカーの作成
マーカーの作成は非常に単純です。
google.maps.Marker オブジェクトを作成すれば、自動的に地図上にマーカーが表示されます。 デフォルトでは影付きのいちじく状 (? ピン？) のアイコンがマーカーになります。