シンプルなGoogle Mapサンプルです。
※Version3になってからAPIのKEYを取得する必要はなくなりました。
SAMPLE解説
●STEP1・・・とりあえず地図を表示
SAMPLE
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
onload = function() {
var myOptions = {
//倍率
zoom: 16,
//北緯、東経
center: new google.maps.LatLng(34.809454, 135.532331),
//マップスタイルは、ロードマップ
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//表示枠を指定
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
DIVの枠(id="map_canvas")を作って、マップを表示させているだけです。
※『北緯、東経の調べ方』
GOOGLE MAPの地図上の右クリックで『この場所について』を選択すると、簡単に見つけられる。
※『マップスタイルについて』
| ROADMAP |
通常の表示。2DのGoogle Maps |
| SATELLITE |
航空写真のタイル |
| HYBRID |
有名な地物(道路や街の名前など）重ねて表示 |
| TERRAIN |
山や川などの地形的特徴を持つ地図を表示 |
●STEP2・・・マーカーを表示
SAMPLE
北緯、東経を指定してオブジェクトを生成することで表示されます。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
onload = function() {
var myOptions = {
//倍率5倍
zoom: 16,
//北緯、東経
center: new google.maps.LatLng(34.809454, 135.532331),
//マップスタイルは、ロードマップ
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//表示枠を指定
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//マーカーオブジェクトの表示
var marker = new google.maps.Marker({
position: new google.maps.LatLng(34.809454, 135.532331),
map: map,
title: "太陽の塔"
});
}
</script>
●STEP3・・・マーカーをクリックしたらインフォウィンドウを表示する
SAMPLE
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
onload = function() {
var myOptions = {
//倍率5倍
zoom: 16,
//北緯、東経
center: new google.maps.LatLng(34.809454, 135.532331),
//マップスタイルは、ロードマップ
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//表示枠を指定
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//マーカーオブジェクトの生成
var marker = new google.maps.Marker({
position: new google.maps.LatLng(34.809454, 135.532331),
map: map,
title: "太陽の塔"
});
//インフォウィンドウオブジェクトの生成
var infowindow = new google.maps.InfoWindow({
content: '<div style="font:color;navy">太陽の塔</div><img src="http://praiation.shiriagari.com/javascript_samples/0003/1-1/img/1182954083.jpg" width="100"/>',
//サイズは余白ができるほど大きい値の場合、自動調整される。
size: new google.maps.Size(200, 200)
});
//マーカーがクリックされたら、インフォウィンドウを表示するように設定する。
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
※イベント・リスナーについて
引数にオブジェクトとイベントを登録するように設定されたようです。以下があります。
| click |
| dblclick |
| mouseup |
| mousedown |
| mouseover |
| mouseout |
PR
