1. Qiita
  2. 投稿
  3. GoogleMapsAPI

ズンドコキヨシ with Google Map API on jsFiddle

  • 0
    いいね
  • 0
    コメント

    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で「セキュリティで保護されているコンテンツのみ表示しています。全てのコンテンツを表示しますか」で「はい」にしたら地図が見えた

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

    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>ZUND−BAR</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;
    }
    
    Comments Loading...