I want to bind a Clickevent to Markers of a GMap, which are already there when the page is loaded. So I dont want to create new Markers, i only want to bind a Click Event to existing Markers.
The Map and the Markers are already placed and now i want to do some jQuery Stuff when the user is clicking on a Marker of the map.
I only have found solutions how to create new Markers and so on. Im working with the API v3.
Related
I wonder is there a way to automatically pop up the infoWindow of a marker provided a coordinate. I want to click a link on the page from which I will get a geolocation, (and this location has already been marked on the map) With this coordinate, the corresponding infoWindow will pop up just like I clicked it on the map. Does anyone have a clue how to do that?
Thanks.
--
Generally, it's like what you can do with Google Maps, if you have multiple locations on the left, you click one, the corresponding marker on the map will pop up an infoWindow.
It's possible, all you need is a reference to the related marker, then you may trigger a click on the marker, and the infoWindow will open.
How to get the reference to the marker depends on your application(the way you create the markers and the links)
I have many map markers with the exact same lat/long cords so no matter how far in I zoom my map still shows the marker cluster and the number of results.
Is there a way to have some onclick or onhover event so that it shows an info box with all of the markers in that cluster in a list? Then clicking a link within that info box opens up that individual marker info box?
I've read solutions to change the lat, long by a small amount so that they aren't the same location. I think that is very messy and not that good anyways if there ends up being multiple markers 10+ anyways at the same locationg. I think it'd be much easier for a user to just click the cluster and bring up the info window with all of those markers in there with links.
Or if someone knows another plugin that does what I am seeking I could work with that too. I just haven't found much info on it.
There might be a plug in out there to do what you want, but it's also possible to do without one. I did something like that in one of my projects.
Add event listener to each marker; clicking opens marker list info window
The content of the marker list info window contains onclick attributes that will open the marker info window.
My code was tucked away into functions, but it was basically just this:
//1) while creating marker, create click listener that opens the marker list
google.maps.event.addListener(marker, 'click', function() {
markerWindow.close();
markerList.open(map, marker);
});
//2) store the content required by the marker's info windows
var markers = [
[marker1Reference, "The Stadium"],
[maerker2Reference, "The Supermarket"]
];
//3) the function that is called each time a marker is chosen from the marker list
function openMarkerInfo(markerIndex) {
markerList.close();
markerWindow.setContent(markers[markerIndex][1]);
markerWindow.open(map, markers[markerIndex][0]);
}
//4) info window for the marker list - the content includes JS onclick events that will open each marker info window
markerList = new google.maps.InfoWindow({
content: "Choose:<br><br><div href='' class='markerLink' onclick='openMarkerInfo(0)'>The Stadium</div><br><div href='' class='markerLink' onclick='openMarkerInfo(1)'>My House</div>"
});
//5) the marker window that will get set each time a marker is clicked in the list
markerWindow = new google.maps.InfoWindow();
Hope that helps!
I am working on a website with google maps integrated.
http://www.ecompanies.nl/pilot/webdesign/breda.html
Infowindows can be opened by clicking on a map marker, or on a header link in the items listed on the right. How can I close the active infowindow before opening a new one (by clicking on a map marker, or on a header link)?
Thanks in advance.
Any help is highly appreciated.
You are creating a new infowindow for each marker. The best way to achieve what you want is to create one infowindow and share that between all the markers.
So:
Put the infowindow creation before the loop.
When you create the click event listener for the marker in the loop add infowindow.setContent('content'); before you open the marker.
this will automatically close the infowindow and open it over the new marker
I want to put a map in a web page where users will be able to put interactive marker (location pins) as many as they want. Now, whenever a marker is placed, I want to store that specified marker's lat, long value to be saved in a database that I have in my server (phpmyadmin).
Trying to get started with Google Map Data API. Have seen lots of examples but could not find any where interactive markers can be placed.
I'm going to show you how to do it with v3 of the APi
Create your map... I'll assume you've got this part down.
Add an event listener to the map. This event listener will call a function that will create the marker (in this case add_marker). You can use any event you want, this uses the click event.
google.maps.event.addListener(this.map, 'click', add_marker);
Create the function that adds the marker to the db then the map. This will require some AJAX. You use the event.latLng to get the lat/lng
function add_marker( event ) {
lat = event.latLng.lat;
lng = event.latLng.lng;
// ajax code here that posts the lat/lng to the server
// only call the remaining code to add the marker if it was successful
var marker = new google.maps.Marker({
position: event.latLng,
map: map // put the handle of your map here
});
}
In version 2 of the API the map click event returned an Overlay, LatLng, Overlaylatlng.
I used this to create a generic map event that would either retrieve the coordinates of the Map click event, or return the coordinates of a Marker or other type of Overlay.
Now that API v3 doesn't return the Overlay or Overlaylatlng during the map click event, how can I go about creating a generic "click" event for the map that works if the user clicks on a marker or overlay? I really don't want to create a click event for each marker I have on my page as I am creating anywhere from a handful to a couple thousand markers.
Also, I had to create a custom ImageMapType in order to display the StreetViewOverlay like we could do in v2 of the API because I couldn't find anywhere that told me how to add the StreetViewOverlay without the pegman icon. How can I go about retrieving the LatLng coordinates of a click on this overlay type as well?
You will need to add a click listener to each overlay you add. You can do this in a createMarker function to reduce your code overhead.
Clicks on markers do not trigger a click event on the map at all.