Google Maps JavaScript API V3のまとめ : JavaScript

Pocket

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.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 


人気記事 はてなブックマーク

この日記のはてなブックマーク数