SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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: http://assets.marcgrabanski.com/reso...ial-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. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,410
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <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/javascrip...ow-how-to.html

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

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,410
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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. #5
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using jQuery 1.7.2, don't really mind about IE6 & 7, but would need to support IE8.

  6. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,410
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    OK, that makes things simpler. So, add the province links to your markup something like this:
    HTML Code:
    <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:
    Code JavaScript:
    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.
    Last edited by fretburner; Jul 5, 2013 at 08:19. Reason: Added missing code

  7. #7
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's perfect mate, thanks so much for your help! I should seriously pay you for this...

  8. #8
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    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. #9
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,410
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by allanlud View Post
    That's perfect mate, thanks so much for your help! I should seriously pay you for this...
    No worries bud, glad I could help.

    Quote Originally Posted by allanlud View Post
    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)
    You could add an extra data attribute for the zoom setting:
    HTML Code:
    <li><a href="#" data-province="Leinster" data-zoom="9">Leinster</a></li>
    Code JavaScript:
    $("#provinces a").click(function(e){
        e.preventDefault();
        var province = $(this).data('province'),
            zoom = $(this).data('zoom');
        map.setCenter( provincePositions[province] );
        map.setZoom(zoom);
    });

  10. #10
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks man!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •