CODEWITHSUNDEEP
javascriptjquerygoogle-mapsdom
Carla Dessi
Carla Dessi

Reputation: 9686

Creating a link to a certain marker on a google map

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

Answers (1)

Usman Faisal
Usman Faisal

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

Related Questions