Google Map APIを試してみたかった。

jsFiddle上で実装。

Fork元 https://jsfiddle.net/salman/4mtyu/

今回の実装 https://jsfiddle.net/bqLqkzax/1/

地図の(見える|見えない)は以下で異なる

MacOS X 10.8.5 + Chromeでは地図が見えず
MacOS X 10.8.5 + Safariなら地図が見えた
Windows 8.1 pro(64bit) + Chromeでも地図が見えない
Windows 8.1 pro(64bit) + IEで「セキュリティで保護されているコンテンツのみ表示しています。全てのコンテンツを表示しますか」で「はい」にしたら地図が見えた

４地点は検索で選んだだけなので、とくに各地点に対しての意図などはございません。

code

html

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>

js

var map;

google.maps.event.addDomListener(window, "load", function () {

var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(35.8899758,140.0727435),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infoWindow = new google.maps.InfoWindow();

  function createMarker(options, html) {
    var marker = new google.maps.Marker(options);
    if (html) {
      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(html);
        infoWindow.open(options.map, this);
      });
    }
    return marker;
  }

  /*
   * add markers to map
   */
  var marker1 = createMarker({
    position: new google.maps.LatLng(35.4517004,139.2902533),
    map: map
  }, "<h1>Marker 1</h1><p>ＺＵＮＤ−ＢＡＲ</p>");

  var marker2 = createMarker({
    position: new google.maps.LatLng(34.5757397,135.4807426),
    map: map
  }, "<h1>Marker 2</h1><p>マルチズンズン</p>");

  var marker3 = createMarker({
    position: new google.maps.LatLng(35.8899758,140.0727435),
    map: map,
    icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png"
  }, "<h1>Marker 3</h1><p>ズンドコ商店 取手店.</p>");

  var marker4 = createMarker({
    position: new google.maps.LatLng(34.7682822,135.55387),
    map: map
  }, "<h1>Marker 4</h1><p>きよし</p>");


});

css

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}