Google Maps link to marker from outside map

Question

I'm trying to make a list of links, correlate to the correct marker on a google map. I have multiple markers and this is what I have:

You can see a live example of my code by viewing source on this page:

http://79.170.40.181/cranes.co.uk/stockists/

I'm using Wordpress's Advanced Custom Fields plugin to generate the map and its markers. I'm using their example code given on their docs pages but I'm trying to add additional functionality. I just need some advice on where I put this piece of code to enable my list of links to relate to each marker on the map:

var name = $('#listdata').find('.clickaway');

google.maps.event.addDomListener(name, 'click', function() {
    infowindow.open(map,marker);
    alert('found me');
});

My list of links has a structure of:

Location 1
   Location 2
   ...

For reference I have pasted my full Google Maps code here:

Here's how I loop through and display the markers:

Can anyone advise or give me some help how I might get this working?

David · Accepted Answer

js fiddle using your code:

http://jsfiddle.net/dheffernan/3xkuybrf/

A couple of points to note:

leave the div listdata empty
The inserted divs for the links, you may need to modify this (see code below i left a comment beside the jquery that appends your links into the listdata div - i added a css class just for jsfiddle to style it but you can remove this...

Replace the js with below.

    /* Google Maps */

(function($) {

    function render_map( $el ) {

        // var
        var $markers = $(document).find('.marker');


        // vars
        var args = {
            zoom        : 16,
            center      : new google.maps.LatLng(0, 0),
            mapTypeId   : google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            mapTypeControlOptions: {
              mapTypeIds: [google.maps.MapTypeId.ROADMAP]
            }
        };

        // create map               
        var map = new google.maps.Map( $el[0], args);

        // add a markers reference
        map.markers = [];
        // add markers
        index=0;
        $markers.each(function(){
            add_marker( $(this), map, index);
            index++;
        });

        // center map
        center_map( map );

        }

    function add_marker( $marker, map, index ) {

        // var
        var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
        var image = 'http://79.170.40.181/cranes.co.uk/wp-content/uploads/2014/10/pin.png';

        // create marker
        var marker = new google.maps.Marker({
            position    : latlng,
            map         : map,
            icon        : image
        });

        // add to array
        map.markers.push( marker );


        // if marker contains HTML, add it to an infoWindow
        if( $marker.html() )
        {
            $('#listdata').append(''+$marker.html()+''); // change html here if you want but eave id intact!!

            $(document).on('click', '#p'+index, function(){
                infowindow.open(map, marker);
                setTimeout(function () { infowindow.close(); }, 5000);
            });

            // create info window
            var infowindow = new google.maps.InfoWindow({
                content     : $marker.html(),
            });




            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'click', function() {

                infowindow.open( map, marker );

            });

        }

        }


    function center_map( map ) {

        // vars
        var bounds = new google.maps.LatLngBounds();

        // loop through all markers and create bounds
        $.each( map.markers, function( i, marker ){

            var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

            bounds.extend( latlng );

        });

        // only 1 marker?
        if( map.markers.length == 1 )
        {
            // set center of map
            alert(bounds);
            map.setCenter( bounds.getCenter() );
            map.setZoom( 16 );
        }
        else
        {
            // fit to bounds
            map.fitBounds( bounds );
        }

        }

    // Call it


      $(document).ready(function(){

        $('.acf-map').each(function(){

            render_map( $(this) );

        });

    });



})(jQuery);

Google Maps link to marker from outside map

Answers (1)

Related Questions