地図上にマーカーを表示させて、吹き出しに説明を出す

 緯度経度を指定してその点を中心として、縦横400ピクセルで地図を表示させ、別の点を緯度経度で指定してマーカーを表示させ、吹き出しまで出します。また、吹き出しが閉じられてしまったら悲しいので、その時だけマーカークリックで再び開くようにしておきます。
 今回は地図の中心を新大久保駅(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:の次に整数で指定。(小さいほど広域、大きいほど詳細)