Link from a menu to a bookmark in Google Maps

Question

I am using the Google Maps API to show the location of some of the company’s stores. I used this tutorial to get.

So far so good. But the problem is that I have a menu with the map locations and I would like to link them to each marker inside the map. How do I do that?

Here’s what I got so far:

var map;
var idInfoBoxOpened;
var infoBox = [];
var markers = [];

function initialize() { 
    var latlng = new google.maps.LatLng(-19.922787, -43.945141);

    var options = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    };

    map = new google.maps.Map(document.getElementById("innerMapa"), options);
}

initialize();

function abrirInfoBox(id, marker) {
    if (typeof(idInfoBoxOpened) == 'number' && typeof(infoBox[idInfoBoxOpened]) == 'object') {
        infoBox[idInfoBoxOpened].close();
    }

    infoBox[id].open(map, marker);
    idInfoBoxOpened = id;
}

function loadSpots() {

    $.getJSON('path/to/marker/spots.json', function(spots) {

        $.each(spots, function(index, spot) {

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(spot.Latitude, spot.Longitude),
                title: "Find a nearby store",
                map: map,
                icon: '/path/to/image/spot.png'
            });


            var myOptions = {
                content: spot.Texto,
                pixelOffset: new google.maps.Size(-150, 0)
            };

            infoBox[spot.Id] = new InfoBox(myOptions);
            infoBox[spot.Id].marker = marker;

            infoBox[spot.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
                abrirInfoBox(spot.Id, marker);
            });
        });
    });

};

loadSpots();

Answer 1

In your menu you need to have a data attribute. Onlcick you take this data, loop in your markers list and trigger the click event.

google.maps.event.trigger(markers[i], 'click');