Complicated Google Maps Question

Hi all, I hope someone can help me with this.

I currently have a map (of Ireland) with multiple markers (about 30). Ireland is split into 4 provinces, so what I need is 4 links for each province, that when clicked will move and zoom to the province the marker is in.

Can anyone help with this?

I had posted on another site and one of the replies was this: - but it’s not exactly what I’m looking for. I’ve been searching in and can’t find what I need.


What you could do is attach a click event handler to each of the links that calls setCenter() and setZoom() on your map, to let you recentre on the relevant province.

Edit: Can you share the code you’ve got so far?

<script type="text/javascript">
var markers = [
	['<h1>Name</h1><p><img src="img.jpg" alt="" />Address1,<br />Address2,<br />Address3</p>', 53.429762,-7.962942]

function initializeMaps() {
	var homeLatlng = new google.maps.LatLng(53.649064,-6.688714);

	var myOptions = {
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: false
	var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
	var infowindow = new google.maps.InfoWindow();
	var marker, i;
	var image = '../img/icons/map-marker.png';
	var bounds = new google.maps.LatLngBounds();

	for (i = 0; i < markers.length; i++) {
		var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
		marker = new google.maps.Marker({
			position: pos,
			map: map
		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
				infowindow.setContent(markers[i][0]);, marker);
		})(marker, i));

That’s what I have so far, I got the bulk from a tutorial (that I can’t remember where it was), but I’m currently looking at something like this -

I’m not too great with Javascript, but I’m learning some as I go.

Are you using jQuery in your page, or you’re sticking with vanilla JS (and if so, do you want to support IE6/7/8)?

Using jQuery 1.7.2, don’t really mind about IE6 & 7, but would need to support IE8.

OK, that makes things simpler. So, add the province links to your markup something like this:

<ul id="provinces">
    <li><a href="#" data-province="Leinster">Leinster</a></li> 
    <li><a href="#" data-province="Ulster">Ulster</a></li> 
    <li><a href="#" data-province="Munster">Munster</a></li>
    <li><a href="#" data-province="Connacht">Connacht</a></li>

and at the end (but inside) of your initializeMaps function, add this:

var provincePositions = {};
provincePositions["Leinster"] = new google.maps.LatLng(52.811063,-7.048159);
provincePositions["Ulster"] = new google.maps.LatLng(36.0621881, -79.5101063); // Change to correct lat/lngs
provincePositions["Munster"] = new google.maps.LatLng(36.0621881, -79.5101063);
provincePositions["Connacht"] = new google.maps.LatLng(36.0621881, -79.5101063);      

$("#provinces a").click(function(e){
    var province = $(this).data('province');
    map.setCenter( provincePositions[province] );
    map.setZoom(9); // Reset zoom level in case user has changed it.

Storing the province name as a data attribute on each link might seem redundant, but doing it this way means you can change the link text without breaking the script.

That’s perfect mate, thanks so much for your help! I should seriously pay you for this…

Just one other question, how would I have one of the links set to a different zoom? (was just told that 1 county will be added too)

Ok had a go, maybe you could let me know if there is a simpler way, but I just added a new ul with an id of county then added this:

var countyPositions = {};
		countyPositions["Dublin"] = new google.maps.LatLng(53.348912,-6.287155);
		$("#counties a").click(function(e){
			var county = $(this).data('counties');
			map.setCenter( countyPositions[county] );
			map.setZoom(10); // Reset zoom level in case user has changed it.

And that’s working fine.

No worries bud, glad I could help.

You could add an extra data attribute for the zoom setting:

<li><a href="#" data-province="Leinster" data-zoom="9">Leinster</a></li>
$("#provinces a").click(function(e){
    var province = $(this).data('province'),
        zoom = $(this).data('zoom');
    map.setCenter( provincePositions[province] );

Great thanks man!