メニュー
E-Mail

ASP.Netのお勉強
VB.Netのお勉強
Excel マクロ・VBAのお勉強
PHPのお勉強
Webデザインのお勉強
Javaのお勉強
総合サイトCocoaLiz
ネイルサロン検索
エステサロン検索
アロマサロン検索
アイビューティーサロン検索
|
地図にコントロールを追加
地図を操作できるコントロールを追加します。
要点だけ説明すると、、
○ コントロールの種類
3つあります。
1)ナビゲーション
移動やズームができるます。
2) MapType
マップタイプの切り替え(道路から衛星写真の切り替え)が可能です。
3)スケール
地図の縮尺を表します。
○ コントロールの追加方法
オプションに設定します。
例えば、ナビゲーションコントロールの場合は、
navigationControlにtrueを設定し、
navigationControlOptionsに表示したいコントロールのスタイルを設定します。
//ナビゲーション
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
//MapType
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR},
//スケール
scaleControl: true
|
○ 作ったサンプルサイトは、こちらです。
○コードは、下記。
<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,
//MapType
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
//ナビゲーション
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR},
//スケール
scaleControl: true
};
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>
|
|
|