Google Maps APIを使って複数のマーカーと吹き出し - JavaScript

Google Maps APIを使って複数のマーカーと吹き出し - JavaScript:

元々Railsでアプリ作ってたのですがJavaScriptを使うのが早かった。 ***APIのキーは自分で取得

<script type="text/javascript"> 
 
function initMap() { 
    var locations = [ 
         ['Title A', 3.180967,101.715546], 
         ['Title B', 3.200848,101.616669], 
         ['Title C', 3.147372,101.597443], 
         ['Title D', 3.19125,101.710052] 
    ]; 
    var map = new google.maps.Map(document.getElementById('map'), { 
         zoom: 12, 
         center: new google.maps.LatLng(3.171368,101.653404), 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
 
    var infowindow = new google.maps.InfoWindow; 
    var marker, i; 
 
    for (i = 0; i < locations.length; i++) {   
        marker = new google.maps.Marker({ 
             position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
             map: map 
        }); 
 
        google.maps.event.addListener(marker, 'click', (function(marker, i) { 
             return function() { 
                 infowindow.setContent(locations[i][0]); 
                 infowindow.open(map, marker); 
             } 
        })(marker, i)); 
    } 
} 
</script> 
 
<script async defer 
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOURAPIKEY=initMap"> 
</script> 
 
<style type="text/css"> 
  #map { height: 400px; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:left; 
    width: 80%;} 
</style> 
 
<div id="map"></div>