google map　マーカー複数　情報ウインドウ表示

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Google maps</title>
    <style type="text/css">
      html,body,#map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="gmap.js"></script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=ここにＡＰＩキー&callback=initMap">
    </script>
  </body>
</html>

var map;
var marker = [];
var infoWindow = [];
var data = [];

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 38.2586, lng: 137.6850} , // 日本の中心
        zoom: 6
    });

	$.getJSON("lists.json", function(json){
        for (var i = 0; i <= json.length-1; i++) {
            data.push(
                {
                    'content': json[i].title,
                    'lat': json[i].lat,
                    'lng': json[i].lng
                }
            );
        };

        for (var i = 0; i < data.length; i++) {
            markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']};
            marker[i] = new google.maps.Marker({
                position: markerLatLng,
                map: map
            });
            infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
                content: data[i]['content'] // 吹き出しに表示する内容
            });
            markerEvent(i); // マーカーにクリックイベントを追加
//            infoWindow[i].open(map, marker[i]); // マーカーを初期表示
        }

    });

}
// マーカーにクリックイベントを追加
function markerEvent(i) {
    marker[i].addListener('click', function() {
        infoWindow[i].open(map, marker[i]);
    });
}

[
    {
        "title": "新宿御苑",
        "lat": 35.6822664,
        "lng": 139.7116884
    }, {
        "title": "芝公園",
        "lat": 35.6615958,
        "lng": 139.7378616
    }, {
        "title": "明治座",
        "lat": 35.6860608,
        "lng": 139.777226
    }
]

google

PAGE TOP