メニュー

E-Mail
xml


ASP.Netのお勉強
VB.Netのお勉強
Excel マクロ・VBAのお勉強
PHPのお勉強
Webデザインのお勉強
Javaのお勉強
総合サイトCocoaLiz
ネイルサロン検索
エステサロン検索
アロマサロン検索
アイビューティーサロン検索
地図を表示する

手始めに、東京駅を中心とした地図を表示します。

要点だけ説明すると、、

○ スクリプトの読み込み

　v3では、Keyが不要です。
　sensorは、trueかfalseを指定します。
　位置センサー機能を利用するかどうかです。
　携帯端末で利用する場合は、trueとなります。


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>


○ 位置オブジェクトの生成

　google.maps.LatLngに緯度、経度を渡して生成します。
　緯度と経度は、Googleの住所から緯度、経度を検索から調べることができます。


var myLatlng = new google.maps.LatLng(35.681382, 139.766084);


○ 地図のオプションを作成

　必須オプションだけ指定します。

var options = {
    //地図のズームサイズ
    zoom: 15,
    //地図の中心地
    center: myLatlng,
    //マップタイプに道路を指定
    mapTypeId: google.maps.MapTypeId.ROADMAP
};


○ 地図の生成

google.maps.Mapに地図のコンテナ（div要素）とオプションを指定します。


var map = new google.maps.Map(document.getElementById("map"), options);



○ 作ったサンプルサイトは、こちらです。

○ コードは、下記。


<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Map API V3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

function initialize() {

    //東京駅の緯度,経度
    var myLatlng = new google.maps.LatLng(35.681382, 139.766084);
    
    //オプションの設定
    var options = {
        //地図のズームサイズ
        zoom: 15,
        //地図の中心地
        center: myLatlng,
        //マップタイプに道路を指定
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(document.getElementById("map"), options);
}

</script>
</head>
<body onload="initialize()">

<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>



Copyright (C) 総合サイトCocoaLiz. All Rights Reserved.