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
    110
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,255
    Mentioned
    32 Post(s)
    Tagged
    4 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
    110
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,255
    Mentioned
    32 Post(s)
    Tagged
    4 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
    110
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,255
    Mentioned
    32 Post(s)
    Tagged
    4 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
    110
    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
    110
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,255
    Mentioned
    32 Post(s)
    Tagged
    4 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
    110
    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
  •