グーグルマップでアクセス地図を表示することがあるが、たまに吹き出しで情報を表示してほしいという依頼がある。

ちなみに吹き出しはhtmlで装飾可能。

<script type="text/javascript" src="http://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(26.2300633, 127.6858965),
    // 距離目盛りの表示
    scaleControl: true,
    // 地図の種類
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var myMarker = new google.maps.Marker({
    // マーカーを置く緯度経度
    position: new google.maps.LatLng(26.2300633, 127.6858965),
    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>