緯度経度を指定してその点を中心として、縦横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:の次に整数で指定。(小さいほど広域、大きいほど詳細)