Reputation: 9686
I've implemented a google maps store locator using this example: https://developers.google.com/maps/articles/phpsqlsearch_v3
It's working fine, but I'm trying to get the list to show in an actual ul
rather than in a drop down list. I've changed the results to show as li
's but I can't get the links to work.
It currently links to the selected option in the dropdown, but I want to make every li
a link instead. This is the bit I need to change:
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.438065, -1.823730),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
Upvotes: 0
Views: 73
Reputation: 257
So you can add click event on all li items and pass marker number in that click event like this:
function selectMarker(markerNum) {
google.maps.event.trigger(markers[markerNum], 'click');
};
This selectMarker function must be apply to all li for making it work.
Upvotes: 2