CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
user2994560
user2994560

Reputation: 1309

Make Google Maps markers clickable with unique links

I am attempting to send http data via get method to next page when user clicks on any of the individual markers on the map. Trying to basically just send a unique number through the URL, but right now with my code it is only sending the number 7 (the number of total markers on the map), while it should be looping. Any ideas?

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(38.50, -95.50),
        mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['Deltaville, VA', 'Grasonville, MD', 'Kemah, TX', 'Vancouver, BC', 'Stuart, FL', 'Manitowoc, WI', 'Alameda, CA'];

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });

            google.maps.event.addListener(marker, 'click', function() {
               window.open("http://myurl.com/map.php?dealer=" + x);
            });

        });    
    }

});

Upvotes: 0

Views: 4418

Answers (2)

Irfan wani
Irfan wani

Reputation: 5065

Here is the basics of how to make a marker clickable;

<!DOCTYPE html>
<html>
<head>
<title>Simple Click Events</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
  src="https://maps.googleapis.com/maps/api/js? 
  key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
  defer
></script>
<style type="text/css">
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }

  /* Optional: Makes the sample page fill the window. */
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
 </style>
 <script>
  function initMap() {
      const myLatlng = { lat: -25.363, lng: 131.044 };
      const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: myLatlng,
    });
    const marker = new google.maps.Marker({
       position: myLatlng,
       map,
       title: "Click to zoom",
    });
    map.addListener("center_changed", () => {
      // 3 seconds after the center of the map has changed, pan back to the
      // marker.
      window.setTimeout(() => {
        map.panTo(marker.getPosition());
      }, 3000);
    });
    marker.addListener("click", () => {
      map.setZoom(8);
      map.setCenter(marker.getPosition());
    });
  }
 </script>
 </head>
 <body>
 <div id="map"></div>
 </body>
 </html>

Upvotes: 0

geocodezip
geocodezip

Reputation: 161324

One way to fix the problem (function closure on the address/index for the geocoder call, function closure on the marker/index for the marker/click event handler). Not sure why you are using the webservice Geocoder rather than the built-in Google Maps Javascript API v3 Geocoding service

function createMarker(latlng,index, map) {
    var marker = new google.maps.Marker({
         position: latlng,
         map: map
     });

     google.maps.event.addListener(marker, 'click', function() {
        window.open("http://myurl.com/map.php?dealer=" + index);
     });
  return marker;
}
function geocodeAddress(address, index, map){
  $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+address+'&sensor=false', null, function (data) {
      var p = data.results[0].geometry.location
      var latlng = new google.maps.LatLng(p.lat, p.lng);
      createMarker(latlng, index, map);
  });    
}
$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(38.50, -95.50),
        mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['Deltaville, VA', 'Grasonville, MD', 'Kemah, TX', 'Vancouver, BC', 'Stuart, FL', 'Manitowoc, WI', 'Alameda, CA'];

    for (var x = 0; x < addresses.length; x++) {
      geocodeAddress(addresses[x],x,map);
    }
});

Upvotes: 6

Related Questions