Make Google Maps markers clickable with unique links
Question
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);
});
});
}
});
2 answers
solution1
5 ACCPTED 2014-03-02 16:49:39
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);
}
});
solution2
0 2020-11-01 08:57:07
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.