CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
Bora Akgerman
Bora Akgerman

Reputation: 11

Google Maps API Multiple Markers With Customer Images

First of all I am a big time google maps api/programing newb.

We sell water filters at retail outlets. I wanted to make a map that has all of the retail outlets on one map. This way customer can find the nearest retail outlet to buy our product. The marker for each retail outlet is its logo.

I am having a very hard time showing specific logos for each retail outlet. Only default google maps red pin is coming up.

Please see below:

<!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>

Upvotes: 1

Views: 4470

Answers (2)

astupidname
astupidname

Reputation: 1847

Add an 'icon' property to the options which you pass to the Marker object:

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));
}
}

Upvotes: 3

duncan
duncan

Reputation: 31930

Firstly what you need to do is put all your code into a function. This should only then get called when the page is loaded. This prevents possible problems where your inline javascript tries to execute before the google maps API has loaded up.

That way you don't have to put all that javascript into the body of the page either.

e.g. taking your existing code...

<!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>

 <script type="text/javascript">
function initialize() {
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));
}
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head> 
<body>
<div id="map" style="width: 705px; height: 410px;"></div>
</body>
</html>

Upvotes: 1

Related Questions