initMapで地図上にマーカーを表示する

地図上に複数のマーカーをまとめて表示する方法です。

まずinitmap関数を宣言し、登録したい場所（ここではA〜C）を配列で表記します。

function initMap(){
var data = new Array();
 data.push({lat:'緯度' ,lng:'経度' ,name:'A'})
 data.push({lat:'緯度' ,lng:'経度' ,name:'B'})
 data.push({lat:'緯度' ,lng:'経度' ,name:'C'})
var myLatLng = new google.maps.LatLng(data[0].lat, 
var myLatLng = new google.maps.LatLng(data[0].lat, data[0].lng);
var opts = {
  zoom:13,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
 (document.getElementById("map"),opts);

 var markers = new Array();
 for (i = 0; i < data.length; i++){
   markers[i] = new google.maps.Marker({
    position: new google.maps.LatLng(data[i].lat, data[i].lng),
      map: map
   });
   dispInfo(markers[i],data[i].name);
 }
}
 function dispInfo(marker,name){
   google.maps.event.addListener(marker, 'click',
   function(event){
     new google.maps.InfoWindow
     ({content:name}).open(marker.getMap(),marker);

   });
 }
</Script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"async defer></script>

最後にinitMapをコールバックすることで、正しい順番でプログラムを実行することができます。