Google Maps JavaScript API V3のまとめ : JavaScript
Google Maps JavaScript API V3の簡単な例。Google Maps JavaScript API V3の公式なチュートリアルは下記にを参照。
»Google Maps JavaScript API V3 チュートリアル – Google Maps API — Google Developers
Maps API JavaScript
header部分にMaps API JavaScriptスクリプトを読み込む。
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
sensorは位置検知機能の有無を指定する。位置検索機能を使う端末はtrue、使わない端末はfalseを指定する。PCは位置検知機能がないものが多いのでPC向けはfalseにするのが良い。
またチュートリアルの例は下記コードを記載している。これはスマートフォンなどのモバイル端末の表示を調整するviewportに関する指定。user-scalable=noを指定するとピンチアウト・ピンチインで拡大・縮小できなくなる。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
地図表示スクリプト
APIの読み込み後に地図表示用のスクリプトを記載。
// Google Maps JavaScript API V3
function initialize () {
// 地図の中心 愛知県庁
var center = new google.maps.LatLng(35.180188, 136.906565);
// 名古屋テレビ塔
var latlng = new google.maps.LatLng(35.172314, 136.908331);
// 地図オプション
var myOptions = {
zoom: 10,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// 地図表示
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// マーカー表示(名古屋テレビ塔)
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"名古屋テレビ塔"
});
// マーカーのクリック処理
google.maps.event.addListener(marker, 'click', function () {
var info = new google.maps.InfoWindow({
content: '名古屋の観光スポット。',
maxWidth: 350
});
info.open(map,marker);
});
}
地図表示スクリプトのイベントハンドラ
body要素にイベントハンドラを設定する。
<body onload="initialize()">
地図表示領域のマークアップ
地図の表示領域をマークアップする。
<div id="map_canvas" style="width: 500px; height: 400px"></div>
チュートリアルは下記のコードだが表示領域が確保されなかったのでピクセル指定。
<div id="map_canvas" style="width:100%; height:100%"></div>
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。