Googleマップのマーカーにラベルとアイコンを追加する

Question

2つのマーカーにラベルを追加するにはどうすればよいでしょうか。マーカーをクリックすると、その詳細が表示されます。また、 "アクセスポイント2"別のマーカーに

function initialize() { 
 

 
    var myLatlng = new google.maps.LatLng(-26.322402,31.142249), 
 
     map = new google.maps.Map(document.getElementById('google-map-default'), { 
 
      zoom: 14, 
 
      center: myLatlng 
 
     }), 
 
     marker = new google.maps.Marker({ 
 
      position: myLatlng, 
 
      map: map, 
 
      title: "We are here!" 
 
     }); 
 

 
    var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924), 
 
     marker1 = new google.maps.Marker({ 
 
      position: accessPoint1, 
 
      map: map, 
 
      title: "Access Point 1" 
 
     }); 
 

 
    var accessPoint2 = new google.maps.LatLng(-26.316700,31.138043), 
 
     marker2 = new google.maps.Marker({ 
 
      position: accessPoint2, 
 
      map: map, 
 
      title: "Access Point 2" 
 
     }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#google-map-default { 
 
height: 200px; 
 
}

<div id="google-map-default"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script>

上記のコードは、現在正常に動作しているmaps.mini.jsと呼ばれるファイルです。あなたのMARKER1について

Answer 1

ために同じことを行うことができ、それに変更を加える必要があり場所（マーカー）を保持する配列、および単一のInfoWindowオブジェクトです。これであなたが必要として、あなたは、コードの残りの部分を複製することなく、できるだけ多くの場所を追加することができます...

function initialize() { 
 

 
    var myLatlng = new google.maps.LatLng(-26.322402, 31.142249); 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: 13, 
 
    center: myLatlng 
 
    }); 
 

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

 
    var marker = new google.maps.Marker({ 
 
    position: myLatlng, 
 
    map: map, 
 
    title: "We are here!" 
 
    }); 
 

 
    var locations = [ 
 

 
    [new google.maps.LatLng(-26.315402, 31.123924), 'Access Point 1', 'Custom text 1'], 
 
    [new google.maps.LatLng(-26.316700, 31.138043), 'Access Point 2', 'Custom text 2'] 
 
    ]; 
 

 
    for (var i = 0; i < locations.length; i++) { 
 

 
    var marker = new google.maps.Marker({ 
 
     position: locations[i][0], 
 
     map: map, 
 
     title: locations[i][1] 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 

 
     return function() { 
 
     infowindow.setContent(locations[i][2]); 
 
     infowindow.open(map, marker); 
 
     } 
 

 
    })(marker, i)); 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas { 
 
    height: 200px; 
 
}

<div id="map-canvas"></div> 
 

 
<script src="https://maps.googleapis.com/maps/api/js"></script>

Answer 2

上で指定したように私はちょうどここを利用して、おそらく、より堅牢で拡張可能なソリューションであるあなたが

var my_contentString1 = 'my text content 1... ' ; 

    var my_infowindow1 = new google.maps.InfoWindow({ 
     content: my_contentString1 
    }); 

    var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924), 
    marker1 = new google.maps.Marker({ 
     position: accessPoint1, 
     map: map, 
     title: "Access Point 1" 
    }); 

    marker1.addListener('click', function() { 
     my_infowindow1.open(map, marker); 
    }); 

がMARKER2

Answer 3

私はそれを私のためにとてもよく働いたこの方法をやってしまいました

\t <script type="text/javascript"> 
 
\t  var locations = [ 
 
\t  ['ap7', -26.303139, 31.093508, 7], 
 
\t  ['ap6', -26.322402, 31.142249, 6], 
 
\t  ['ap5', -26.316700, 31.138043, 5], 
 
\t  ['ap4', -26.315402, 31.123924, 4], 
 
\t  ['ap3', -26.329244, 31.150478, 3], 
 
\t  ['ap2', -26.309525, 31.134632, 2], 
 
\t  ['ap1', -26.289923, 31.140195, 1] 
 
\t  ]; 
 

 
\t  var map = new google.maps.Map(document.getElementById('map'), { 
 
\t  zoom: 14, 
 
\t  center: new google.maps.LatLng(-26.309525, 31.134632), 
 
\t  mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t  }); 
 

 
\t  var infowindow = new google.maps.InfoWindow(); 
 

 
\t  var marker, i; 
 

 
\t  for (i = 0; i < locations.length; i++) { 
 
\t  marker = new google.maps.Marker({ 
 
\t   position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
\t   map: map 
 
\t  }); 
 

 
\t  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
\t   return function() { 
 
\t   infowindow.setContent(locations[i][0]); 
 
\t   infowindow.open(map, marker); 
 
\t   } 
 
\t  })(marker, i)); 
 
\t  } 
 
\t </script>