1

まず第一に、私はグーグルマップのAPI/プログラミングの初心者です。

小売店で浄水器を販売しています。すべての小売店を 1 つのマップにまとめたマップを作成したかったのです。このようにして、顧客は当社の製品を購入するための最寄りの小売店を見つけることができます。各小売店の目印はそのロゴです。

各小売店の特定のロゴを表示するのに非常に苦労しています。デフォルトの Google マップの赤いピンのみが表示されます。

下記を参照してください：

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script>
</head> 
<body>
<div id="map" style="width: 705px; height: 410px;"></div>
 <script type="text/javascript">

var locations = [
['Metro Gross Market - GÜNEŞLİ',41.030258,28.814306,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/metro.png'],
['Tekzen Yapı Market - İSTANBUL MERTER',41.001022,28.888908,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/tekzen.png'],
['Bauhaus - BAKIRKÖY',40.997486,28.885653,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/bauhaus.png'],
['Baumax - SAMSUN',41.263283,36.349628,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/baumax.png'],
['Saturn - FORUM İSTANBUL',41.044228,28.897497,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/saturn.png'],
['Media Markt - Adana M1 AVM',37.019440,35.241714,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/mediamarkt.png'],
['Banio Yapı Market - İZMİR GAZİEMİR',38.331020,27.134804,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/banio.png']
];

var map = new google.maps.Map(document.getElementById('map'), {
panControl: false,
zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: false,


  zoom: 6,
  center: new google.maps.LatLng(39, 33.3),
  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,
    animation: google.maps.Animation.DROP
  });

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

2 に答える 2

3

Marker オブジェクトに渡すオプションに「アイコン」プロパティを追加します。

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,
    icon: locations[i][4],
    animation: google.maps.Animation.DROP
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
}
于 2013-08-03T08:57:57.360 に答える