緯度経度を指定してその点を中心として、縦横400ピクセルで地図を表示させ、別の点を緯度経度で指定してマーカーを表示させ、吹き出しまで出します。また、吹き出しが閉じられてしまったら悲しいので、その時だけマーカークリックで再び開くようにしておきます。
今回は地図の中心を新大久保駅(35.701306, 139.700044)、マーカーは新宿駅(35.690921, 139.700258)に表示してます。緯度・経度の取得は「緯度・経度・住所を取得する」で、どうぞ。
今回は地図の中心を新大久保駅(35.701306, 139.700044)、マーカーは新宿駅(35.690921, 139.700258)に表示してます。緯度・経度の取得は「緯度・経度・住所を取得する」で、どうぞ。
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script> <div id="map" style="width: 400px; height: 280px;"></div> <script type="text/javascript"> var myMap = new google.maps.Map(document.getElementById("map"), { // ズームレベル zoom: 14, // 中心点緯度経度 center: new google.maps.LatLng(35.701306, 139.700044), // 距離目盛りの表示 scaleControl: true, // 地図の種類 mapTypeId: google.maps.MapTypeId.ROADMAP }); var myMarker = new google.maps.Marker({ // マーカーを置く緯度経度 position: new google.maps.LatLng(35.690921, 139.700258), map: myMap }); var myInfoWindow = new google.maps.InfoWindow({ // 吹き出しに出す文 content: "新宿駅で~す" }); // 吹き出しを開く myInfoWindow.open(myMap, myMarker); // 吹き出しが閉じられたら、マーカークリックで再び開くようにしておく google.maps.event.addListener(myInfoWindow, "closeclick", function() { google.maps.event.addListenerOnce(myMarker, "click", function(event) { myInfoWindow.open(myMap, myMarker); }); }); </script>
- 上のHTMLをコピーして、緯度・経度・大きさを変えれば好きな地図を表示できます。
- 緯度・経度はgoogle.maps.LatLng()の引数で指定。
- 吹き出しの内部はcontent:の次に"~"で囲って指定。HTML記述できますので、リンク<a>張ったりとか画像<img>載せたりとかできます。
- 大きさは、表示させる<div>タグで指定。
- ズームレベルはzoom:の次に整数で指定。(小さいほど広域、大きいほど詳細)