CODEWITHSUNDEEP
google-maps
kumo99
kumo99

Reputation: 133

Switch locations on google map using a dropdown

I'm new to google maps, and I have a map with multiple markers, and I want to switch between them using a dropdown menu.

I'm using this code to populate the dropdown menu with the markers' title:

// select a marker from dropdown menu
$("select#mySelect").change(function(){ 
      gotoMarker($(this).val()); 
});

function makeMarkerList() {
        var options = "";
        $("select#mySelect").empty();
        for (var i in markers) {
            options += "<option value='" + i + "'>" + markers[i].map.title + "</option>";
        }
        $("select#mySelect").html(options);
}

This is what I have so far jsfiddle

this shows a dropdown menu above the map, but I don't know how to get the markers titles in the dropdown menu.

I appreciate your help.

Thank you.

Upvotes: 0

Views: 2181

Answers (1)

Sunil D.
Sunil D.

Reputation: 18193

Regarding your second problem: Your original code, shown below, was trying to pass the value of the selected item in the drop down list to the panTo() method. However, due to the way you've set that up, that value is just the index of the markers in your markers array and not a LatLng object. Passing that index to the panTo() method generates an error.

$("select#mySelect").change(function(){ 
      //gotoMarker($(this).val());
    map.panTo($(this).val().getPosition());
});

To fix that, get the index and then use the corresponding marker from your markers array:

$("select#mySelect").change(function(){ 
    var index = $(this).val();
    map.panTo(markers[index].position);
});

Upvotes: 1

Related Questions