Google Maps API Ver.3：マップの種類の変更 | 三丁目の電脳

<< Google Maps API Ver.3：zoomlevelイベント | main | Google Maps API Ver.3：ズームレベルの指定 >>
スポンサーサイト
この広告は60日以上更新がないブログに表示されております。
新しい記事を書くことで広告を消すことができます。
| 2011.10.05 Wednesday | | - | - | - |
Google Maps API Ver.3：マップの種類の変更
JUGEMテーマ：インターネット


一般に表示されているマップ上にあるボタンではなくマップの外に
表示されているボタンでマップの種類を変更します。

mapオブジェクト内のsetMapTypeIDで地図の種類を変更します。
またmapはデフォルトで地図の種類を変更するボタンが地図上に
表示されてしまうのでmyOptions内にmapTypeControl: falseを
追加してデフォルトのボタンを消します。

簡単な説明はここのページの『Mapクラス』の『メソッド』内に
あるsetMapTypeIDと『Map Optionsオブジェクト』の『プロパティ』内に
あるmapTypeControlを参照です。

1.まずはサンプルソース(下記)をエディタ（任意）にコピーしましょう。
　
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Google Maps API3 Sample</title>

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

<script type="text/javascript">

//<![CDATA[

    function initialize() {    

        latlng = new google.maps.LatLng(-34.397, 150.644);

        myOptions = {

           zoom: 8,

           center: latlng,

           mapTypeId: google.maps.MapTypeId.ROADMAP,

           mapTypeControl: false

        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    }

//]]>

</script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width: 500px; height: 400px"></div>

<form>

    <input type="button" value="地図" onclick="map.setMapTypeId(google.maps.MapTypeId.ROADMAP)" />

    <input type="button" value="航空写真" onclick="map.setMapTypeId(google.maps.MapTypeId.SATELLITE)" />

    <input type="button" value="地図+写真" onclick="map.setMapTypeId(google.maps.MapTypeId.HYBRID)" />

    <input type="button" value="地形" onclick="map.setMapTypeId(google.maps.MapTypeId.TERRAIN)" />

</form>

</body>

</html>


2.エディターで作成したサンプルソースはutf-8エンコードで保存し
　FTP（FFFTPなど）で『Google Maps API Ver.3：登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
　表示されるはずです。
　
　因みに私のURLはここです。

4.表示はこんな感じです。
　任意なボタンを押下する事で地図のイメージが変わります。

　sample03

　簡単に説明するとボタンのonclickイベントでmapオブジェクトのsetMapTypeIDを
　それぞれの地図の種類に合わせて実行します。
Check
| 2010.01.15 Friday | 11:57 | Google Maps API Ver.3 | comments(0) | trackbacks(1) |
コメント
コメントする









この記事のトラックバックURL
http://kaion.jugem.jp/trackback/203
トラックバック
Google Maps API v3をじっくりといじってみた
昨日、Google Maps API v3をじっくりといじってみた。 スマートフォンに対してパフォーマンス改善が行われたようなので、ちょっと前から気になっていた。v2に比べて、記述の仕方がぜんぜん違うけど、v3のほうがスマートでコードを書けるような気がする。設定の値とかま
| Branberyheag Lab | 2010/01/28 9:03 PM |