dbybanez dbybanez - 24 days ago 9
Javascript Question

How do you trigger a maker's infowindow using a dropdown menu using jquery in google maps api js

I want to control the markers using a dropdown outside the Google map. I know the dropdown works fine because it shows an error of google.

Below is my code.

var map;
var circleicon;

var infowindow, marker;

function initMap() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(12.415875, 123.107391),
zoom: lastzoom,
styles: [
...
]
});

infowindow = new google.maps.InfoWindow({});

var i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
//var select_location = new selectLocation(locations[i][0]);
}
})(marker, i));

}

google.maps.event.addListener(map, 'zoom_changed', function(){
console.log('zoom_changed');
clearInterval(intID);

var zoom = map.getZoom();

if(zoom > lastzoom) {
radiusMax /= 2;
radiusMin /= 2;
step /= 2;
} else {
radiusMax *= 2;
radiusMin *= 2;
step *= 2;
}
lastzoom = zoom;
});

google.maps.event.addDomListener(window, 'load', initMap);
}


var map_location;

$(document).ready(function(){
$("#mapSelection").dropdown({
onChange: function(val){
map_location = val;
google.maps.event.trigger(marker[map_location], 'click');
alert(map_location);
}
});

});


Whenever I try to run again, I get an error
Uncaught TypeError: Cannot read property '__e3_' of undefined

Is there something wrong with how I initialize Google Maps?

Answer

Problem is you didn't create an array of markers but you tried to use a single marker as an array. I created markers[] array to prevent confusion, also you don't need another global variable for marker. marker it's scope is enough to trigger infowindow

Working Fiddle

https://jsfiddle.net/ergec/smq8m547/

Simplified JS Code

I changed the code a bit to make it work, but you'll get the idea.

var map;
var infowindow, markers = [];

var locations = [
    ["blah", 33.808678, -117.918921],
    ["mehh", 33.807678, -117.928921],
    ["peww", 33.806678, -117.938921]
];

function initMap() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: new google.maps.LatLng(33.808678, -117.918921),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    infowindow = new google.maps.InfoWindow({});

    var i;
    for (i = 0; i < locations.length; i++) {
        markers[i] = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(markers[i], 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
                //var select_location = new selectLocation(locations[i][0]);
            }
        })(markers[i], i));

    }
}
initMap();

var map_location;

$(document).ready(function() {
    for (i = 0; i < locations.length; i++) {
        $("select").append("<option value='" + i + "'>" + locations[i][0] + "</option>");
    }
    $("select").change(function() {
        var map_location = $(this).val();
        console.log(map_location);
        google.maps.event.trigger(markers[map_location], 'click');
    });
});
Comments