Information

Google Maps JavaScript API V3 ひな形

  •    2011年1月11日(火) 22:49 JST 閲覧件数 1,340
Google Maps JavaScript API V3ネタ。

マーカーの入った地図を手早く表示したいときのための備忘録。
下のほうにあるコードのコピペ一発で表示できます。
マーカーをクリックすると写真と住所が出ます。サンプル地点はとりあえず京都駅。

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript">
function initialize() {
    var latlng = new google.maps.LatLng(34.985458,135.757755);
    var myOptions = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: true
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title:"京都駅"
    });
    var mapwin = new google.maps.InfoWindow({
        content: "<table><tr><td style='vertical-align:top'><strong>京都駅</strong><br><br>京都府京都市下京区<br>東塩小路高倉町8-3<br></td><td><img src='http://www.waldiz.com/images/library/Image/kyoto-st.jpg'/></td></tr></table>"
        });
    google.maps.event.addListener(marker, 'click', function() {
        mapwin.open(map,marker);
    });
}
</script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:450px; height:400px"></div>
</body>
</html>

 

あるいは、


<html>
  <body>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
    <script type="text/javascript">
      window.onload = function() {
        var latlng = new google.maps.LatLng(34.985458,135.757755);
        var myOptions = {
          zoom: 13,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          streetViewControl: true
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          title:"京都駅"
        });
        var mapwin = new google.maps.InfoWindow({
          content: "<table><tr><td style='vertical-align:top'><strong>京都駅</strong><br><br>京都府京都市下京区<br>東塩小路高倉町8-3<br></td><td><img src='http://www.waldiz.com/images/library/Image/kyoto-st.jpg'/></td></tr></table>"
        });
        google.maps.event.addListener(marker, 'click', function() {
          mapwin.open(map,marker);
        });
      }
    </script>
    <div id="map_canvas" style="width:450px; height:400px"></div>
  </body>
</html>