Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps Marker Click Event

I'd like to populate a google map with several markers. When the user clicks on a marker I would like it to send the user to a different webpage which is designated for that location. (for example: lets say the markers represent homes, when you click on a marker it takes you to a page with more information about the home)

What is the simplest way to do this?

like image 271
Mike Avatar asked Mar 22 '10 01:03

Mike


People also ask

How do I add an event to Google Maps?

To add an event, head to Google Maps on Android, tap on Contribute >Events > Add a public event. You can add an event name, tag the location, and add the time and date of the event as well. There's an option to add an image, write more event details, and add description as well.

How do I see events on Google Maps?

Simply open the sidebar menu, tap “Your Places” and then tap “Upcoming.” If you don't want to see specific events on the map, you can hide them by tapping on the event from the map and then tapping “Dismiss.”

How do I put InfoWindow on marker?

Call setPosition() on the info window, or. Attach the info window to a new marker using the InfoWindow. open() method. Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.


2 Answers

I believe that as of google map v3, GEvent is not recognized, the below worked for me

google.maps.event.addListener(marker, "click", function() {
    window.location = url;
});
like image 132
DinoSaadeh Avatar answered Oct 14 '22 12:10

DinoSaadeh


You will need to attach an event listener to each marker. The click handler can set document.location to the URL of the page you want to go to.

var marker = new GMarker(location);
GEvent.addListener(marker, "click", function() {
    window.location = theURL;
});
map.addOverlay(marker);

Since you will probably be adding markers in a loop, you will need to make sure each one gets its own URL. Since closures keep the actual variables they access (not their values), you probably need to put at least addListener code in its own function to create its own scope. Your loop would look kind of like this:

function createMarker(location, url) {
    var marker = new GMarker(location);
    GEvent.addListener(marker, "click", function() {
        window.location = url;
    });
    return marker;
}

// Assuming locations is an array of objects with lat, lng, and url properties
for (var i = 0; i < locations.length; i++) {
    var loc = locations[i];
    map.addOverlay(createMarker(new GLatLng(loc.lat, loc.lng), loc.url));
}
like image 33
Matthew Crumley Avatar answered Oct 14 '22 14:10

Matthew Crumley