Complicated Google Maps Question

JavaScript
1

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: http://assets.marcgrabanski.com/resources/jquery-google-maps/tutorial-part1.html - but it’s not exactly what I’m looking for. I’ve been searching in developers.google.com and can’t find what I need.

2

Hi,

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?

3 


<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]);
		bounds.extend(pos);
		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]);
				infowindow.open(map, marker);
			}
		})(marker, i));
	}
	map.fitBounds(bounds);
}
</script>

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 - http://blog.calebnance.com/javascript/google-maps-v.3-multiple-markers-with-infowindow-how-to.html

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

4

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)?

5

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

6

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>
</ul>

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){
    e.preventDefault();
    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.

7

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

8

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){
			e.preventDefault();
			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.

9

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){
    e.preventDefault();
    var province = $(this).data('province'),
        zoom = $(this).data('zoom');
    map.setCenter( provincePositions[province] );
    map.setZoom(zoom);
});
10

Great thanks man!