Google maps API v3 - Multiple markers each with a custom url link + custom icon

Question

First time trying to build a map using Google's map API and have hit a roadblock.

I'm trying to make a custom map that has:

Multiple location markers
Custom icons for the markers
A custom url link for each marker so that whenever someone clicks on the marker they go to the url link

The map is for a client that owns a few offices in Soho, London. I've been testing out various code in Google's playground + using w3 schools code tester. I've been finding examples of how to setup the various elements of my map which all work fine when doing it one by one.

However it seems if I wanted to combine all the features of the map that the code needs to be setup differently.

Here's what I have so far:

<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"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 300px;"></div>

<script type="text/javascript">
var locations = [
  ['56-58 Broadwick Street', 51.5053, -0.1481, 5],
  ['79 Wardour Street', 51.512370, -0.133300, 3],
];

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

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

var marker, i;
var markers = new Array();

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

  markers.push(marker);

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

function AutoCenter() {
  //  Create a new viewpoint bound
  var bounds = new google.maps.LatLngBounds();
  //  Go through each...
  $.each(markers, function (index, marker) {
  bounds.extend(marker.position);
  });
  //  Fit these bounds to the map
  map.fitBounds(bounds);
}
AutoCenter();

</script>
</body>

The idea being that the var locations will be the various office locations that my client own. Each one of these office location markers will link to the relevant office page.

Sorry to have to ask you guys but can anyone lead me in the right direction? I thought I could piece all the code together but it seems like if I want to combine all 3 features the code is setup differently.

Thanks for your time.

Perhaps you should include the relevant URL in the array of markers. Then use function closure to associate the URL with the marker like is done in the [answer to this question](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Dec 11 '13 at 16:47
[Link marker to web page](http://stackoverflow.com/questions/19081850/to-link-marker-to-web-page) — geocodezip, Dec 11 '13 at 16:53

score 0 · Answer 1 · answered Dec 11 '13 at 16:31

For starters, rather than have your JS in the body of your document, move it into the head.

And add an event listener for when the window loads to call an initialize function which creates the map:

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

And move all the JS that's currently not in any function at all, into that initialize function.

I'm not sure the point of your AutoCenter function. If it's just to make the map expand to fit the bounds of your markers, put this into your initialize function too.

Also this may just be a sample of some data rather than what you're actually doing, but that trailing comma after the last item will cause this array to error in IE:

var locations = [
  ['56-58 Broadwick Street', 51.5053, -0.1481, 5],
  ['79 Wardour Street', 51.512370, -0.133300, 3],
];

Google maps API v3 - Multiple markers each with a custom url link + custom icon

1 Answers1