Support

Account

Home Forums General Issues Link to Google Map marker from outside of map

Solving

Link to Google Map marker from outside of map

  • I have a map full of markers and I have a separate unordered list, listing those markers. I’m trying to make the two elements talk with eachother.

    When I click a link in my list, I want it to centre the map and open the info window of that marker on the map.

    How can I do this?

    I have a demo site setup: http://79.170.40.181/cranes.co.uk/stockists/ Just view source to see the script I’ve taken (unedited) from the Google Maps Docs pages here on the ACF site.

    I just don’t know how to do this any help would be great.

    This is my list of links:

    <ul id="listdata"
       <li><a href="#" class="clickaway">Location 1</a></li>
       <li><a href="#" class="clickaway">Location 2</a></li>
       ...
    </ul>

    Here’s the code I thought would work but doesn’t:

    var name = $('#listdata').find('.clickaway');
    
    google.maps.event.addDomListener(name, 'click', function() {
        infowindow.open(map,marker);
        alert('found me');
    });
  • Looking for some help on this as well – I’m not having any luck so far. OP, if you were able to find a a method, could you post it up?

  • bumping this again – anyone having any luck?

  • I actually did that here: http://energycoalition.org/energy-architects-in-action/

    in the add_marker portion I updated it to this:

    /*
    	*  add_marker
    	*/
    	 
    	function add_marker( $marker, map ) {
    	 
    		// var
    		var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    	 
    		// create marker
    		var marker = new google.maps.Marker({
    			position	: latlng,
    			map			: map,
    			icon: '...'
    		});
    
    	 
    		// add to array
    		map.markers.push( marker );
    
    		
    	 
    		// if marker contains HTML, add it to an infoWindow
    		if( $marker.html() )
    		{
    			// create info window
    			
    	 
    
    			 liTag=$("body ul.utilities").find("[data-lat='" + $marker.attr('data-lat') + "']");
    			 // console.log(liTag);
    			// show info window when marker is clicked
    			$(liTag).click(function() {
    				infowindow.setContent($marker.html());
    				infowindow.open(map, marker);
    			});
    
    			google.maps.event.addListener(marker, 'click', function() {
    				infowindow.setContent($marker.html());
    				infowindow.open(map, marker);
    			});
    
    			// close info window when map is clicked
    		     google.maps.event.addListener(map, 'click', function(event) {
    		        if (infowindow) {
    		            infowindow.close(); }
    				}); 
    
    		}
    	 
    	}

    I use to separate loops, one to output the list items, and one for the map. In the list items I add the latitude to the LI itself

  • wonderful – thanks so much for the input, i’m gonna give this a shot and report back. Appreciate the help.

  • THIS! EXACTLY THIS! Thank you @rorymheaney! I was looking for this answer for like 18 hours yesterday. You are a lifesaver! Nice website by the way. I love the way you implemented all of your maps. You did that all with ACF?

  • @uptownbrent thanks! Yes that section is all acf. Its a repeater on their site, 4 repeaters, 4 maps.

    It could be done with 1 repeater technically/post type and you use options to toggle markers and update map styling. That’s how I would do it now with what I know now.

    I have other examples of ‘search’ etc, can be done with acf and getting into google maps.

  • likewise much thanks – i never reported back, it worked great, my results are here: http://www.richarderdman.com/collections-map/

  • Hello,
    This is now an old thread but it is just what I need – that is if I can get it to work.

    My problem is that I just cant get the links in the list to trigger the infowindow popup.

    Any chance you can provide a few more details on how to get this to work?

    For example, you mentioned that you “… In the list items I add the latitude to the LI itself”

    What do you mean by that?

    Thanks

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.