Does any one have a clue how to add an info windows to the cluster markers, containing the merged markers info window content?
This is an of the default marker clusterer behaviour:
http://www.psop.fr/MAP_Population_Google.php
thanks
You should listen to the clusterclick event on the markercluster. The object that is passed into the event contains an array of markers that are in the cluster and the position of the cluster.
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
markers = cluster.getMarkers();
info = "";
$.each(markers, function(x, marker) {
if(me.infowindows[marker.__gm_id]){
info = info + "<br/>" + me.infowindows[marker.__gm_id].content;
}
});
.....
something like that works, you get the markers associated with the clusterclick. and then loop through the infowindows, i'm not sure how yours is set up. but the above code should make sense.
you also need to disable the zoom on click as the clusters get re-drawn for each zoom.
var contentString = 'This is an example';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Related
I am using Markerclustererplus with Google Maps API v3 to ease the display of markers on the screen.
The problem is that I will have several markers in the exact same place (and it should be that way) and I would like to, when clicking on a cluster, to display an info window containing all the markers that were clustered.
I've tried several code and similar questions here in StackOverflow, unfortunately I do not master JS and couldn't solve this.
Markers are pushed into an array with some data:
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : marker_image
});
map.markers.push(marker);
When I click an isolated marker, the info window appears ok with a title and an image of that marker:
var infowindow = new google.maps.InfoWindow({
content : $marker.attr('data-title') + '<img width="50" src="' + $marker.attr('data-image') + '">'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
What I would like to happen, is that when clicker a cluster, an info window would open with all of the markers it contains displayed with their corresponding title and image (like, reversing the clustering operation).
Thank you for the help.
Managed to solve this, thanks to the example provided in here.
If anyone is interested, here is how I've done:
First, I've added the markers to the map getting data attributes coming from several custom fields from Wordpress custom posts:
function add_marker( $marker, map ) {
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var marker_image = $marker.attr('data-marker');
var marker_name = $marker.attr('data-title');
var marker_userpicture = $marker.attr('data-image');
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : marker_image,
name : marker_name,
userpicture : marker_userpicture
});
map.markers.push(marker);
Created the MarkerCluster:
var markerCluster = new MarkerClusterer(map, map.markers, mcOptions);
Added a click event listener that got the markers from the cluster, their data, created the info window content from that data and finally opened the info window:
google.maps.event.addListener(markerCluster, 'click', function(cluster){
var content ='';
var clickedMarkers = cluster.getMarkers();
for (var i = 0; i < clickedMarkers.length; i++) {
if(i==0) {
var var_pos = clickedMarkers[i];
}
var clickedMarkersNames = clickedMarkers[i].name;
var clickedMarkersPicture = clickedMarkers[i].userpicture;
content +=clickedMarkersNames;
content +=clickedMarkersPicture;
}
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
infowindow.open(map,var_pos);
});
I have the following function. geolocationService.getNearbyPeoples() is a service that
fetch data from db.
function nearbyPeoples(meLat, meLng, map){
geolocationService.getNearbyPeoples(meLat, meLng).then(function(response){
for (var i = 0; i < response.data.length; i++) {
var nearbyLatLng = new google.maps.LatLng(response.data[i].lat, response.data[i].lng);
var nearbyMarkers = new google.maps.Marker({
position: nearbyLatLng,
title: response.data[i].first_name
}).setMap(map);
};
});
}
then when dragend a center marker (meMarker) will call the function above to show nearby markers
google.maps.event.addListener(meMarker, 'dragend', function() {
nearbyPeoples(meMarker.position.lat(), meMarker.position.lng(), map);
});
then I want to remove the previous markers in dragstart. The reason is to prevent duplicated
markers if meMarker is dragend same location.
google.maps.event.addListener(meMarker, 'dragstart', function() {
});
But I have no idea how to remove or any better suggestions?
Instead of removing markers, why not keep a list (object) of markers as they are added and use it to avoid duplicating a marker? And/or use it to remove markers outside the bounds of the map view, if you must remove markers.
I wanna place the InfoWindow in my google Maps center of the map-Window. Is this possible?
Unfortunatly there is no option in the InfoWindow options like this
var infowindow = new google.maps.InfoWindow({
positionMiddleOfWindow: true });
Someone knows how to place the InfoWindow in the middle of the map window?
First, set the map to center on the marker. You can check the domready event of the InfoWindow and scroll the map a little left and bottom so that the InfoWindow is centered.
jQuery
pin=new google.maps.LatLng(50.00, 50.00);
marker=new google.maps.Marker({
position:pin,
});
marker.setMap(map);
map.setCenter(marker.getPosition());
// The InfoWindow
myWindow = new google.maps.InfoWindow({
content:'<p id="myId">My InfoWindow</p>',
});
myWindow.open(map, marker);
google.maps.event.addListener(myWindow, 'domready', function() {
// Get the actual height of the InfoWindow
e = $('#myId').parent().parent().parent();
h = parseFloat(e.height());
w = parseFloat(e.width());
// Move the map a little to the left and down
map.panBy(-w/2, h/2)
});
You can get the coordinates of the center of your map, then create the infowindow with that location
var lat = map.getCenter().lat();
var lng = map.getCenter().lng();
or get the latLng in one piece:
var latlng = map.getCenter();
Instead of moving the map or calculating the height or width just use the following function. The trick here is to delay sometime before we open the infoWindow. We should setZoom and setCenter and delay 300 milliseconds before we open the infoWindow and the google maps api will open the infoWindow right in the center how it should be:
function OpenInfoWindowCentralized(map, infowindow, marker) {
map.setZoom(16);
map.setCenter(marker.getPosition());
setTimeout(function() {
infowindow.open(map, marker);
}, 300);
}
I hope it helps in some way...
Cheers
I have a map with a bunch of markers, and a table of data that corresponds to each marker. When the user clicks on an item in the table, the InfoWindow for the corresponding marker is opened. Everything works fine when the map is zoomed out and the markers are all visible, but if the map is zoomed in, and an InfoWindow for an off-screen marker is opened by clicking the item in the table, here is what happens:
The map scrolls to the correct location, where the InfoWindow already appears open
The map stops panning, and the InfoWindow disappears.
Any suggestions as to what might be going on and how to solve this?
Alright, the issue related to the fact that I was using the Marker Clusterer on the map... essentially, the following was happening:
Click item in table, InfoWindow opens
Map gets panned to the location to display the InfoWindow
When panning is complete, the Marker Clusterer was then re-drawing (if needed), and forcing the InfoWindow closed.
My solution was that when an item in the table is clicked, I get the corresponding Marker's latlng, manually pan to this location, wait for the panning to complete via the 'idle' listener, and when complete (and the Clusterer has done it's re-draw), THEN I open the InfoWindow.
// get map, marker positions
var mapLatLng = GLOBAL_map.getCenter();
var markerLatLng = GLOBAL_markers[index].getPosition();
// pan the map
if(!markerLatLng.equals(mapLatLng)) {
// map will need to pan
GLOBAL_map.panTo(markerLatLng);
google.maps.event.addListenerOnce(GLOBAL_map, 'idle', function() {
// open InfoWindow
GLOBAL_infowindow.setContent(GLOBAL_markers_content[index]);
GLOBAL_infowindow.open(GLOBAL_map, GLOBAL_markers[index]);
});
} else {
// map won't be panning, which wouldn't trigger 'idle' listener
GLOBAL_infowindow.setContent(GLOBAL_markers_content[index]);
GLOBAL_infowindow.open(GLOBAL_map, GLOBAL_markers[index]);
}
This drove me crazy. My solution is simpler, though. I just set a timer so I don't refresh the map within one second after a pin is clicked.
start with the global:
// global timer variable
var clickTime = Date.now() - 1001;
then define you marker click like:
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
clickTime = Date.now();
});
then set up your idle like:
google.maps.event.addListener(map, 'idle', function () {
if (Date.now() > (clickTime + 1000))
updateMap();
});
Don't use idle event. Use dragend and zoom_changed events from the API spec instead which will allow you to open your infoBoxes without refreshing the map.
google.maps.event.addListener(map, 'dragend', function() {
getMarkers();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
getMarkers();
});
I wonder whether someone may be able to help me please.
I've put some coding together (please see below) whereby a user goes onto a HTML form, they type in an address and click a 'Search' button. Upon doing this, the location is plotted on the Google map and the Lat and Long co-oridnates are automatically entered into the associated text boxes on my form.
What I would like to do, if at all possible, is for the marker to be draggable so the user can fine tune the location, and as they drag the marker, I'd like for the Lat and Long fields to change their
associated co-ordinates.
In addition, I'd also like, if at all possible, to have a field on the form called 'NearestAddress' to show the nearest address to where the marker has been dragged to.
I've managed to make the markers draggable but they don't update the Latitude and Longitude text boxes. I'm also unsure how to add the functionality to show the updated address to where the marker has been dragged to.
(function() {
// Defining some global variables
var map, geocoder, myMarker, infowindow;
window.onload = function() {
// Creating a new map
var options = {
zoom: 3,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Getting a reference to the HTML form
var form = document.getElementById('LocationSearchForm');
// Catching the forms submit event
form.onsubmit = function() {
// Getting the address from the text input
var address = document.getElementById('Address').value;
// Making the Geocoder call
getCoordinates(address);
// Preventing the form from doing a page submit
return false;
}
}
// Create a function the will return the coordinates for the address
function getCoordinates(address) {
// Check to see if we already have a geocoded object. If not we create one
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Creating a GeocoderRequest object
var geocoderRequest = {
address: address
}
// Making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// Check if status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Center the map on the returned location
map.setCenter(results[0].geometry.location);
// Creating a new marker and adding it to the map
var myMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable:true
});
document.getElementById('Latitude').value= results[0].geometry.location.lat();
document.getElementById('Longitude').value= results[0].geometry.location.lng();
google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt){
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
}
});
}
})();
I am new to Google maps development and I'm not even sure whether it's possible to achieve what I want. I've been working on this now for a few weeks and it's driving me a little crazy, so if someone could perhaps point me in the right direction it would gratefully be received.
Many thanks and kind regards
Chris
Instead of evt.latLng.lat().toFixed(3) you should just use the myMarker object and grab it's position.
Getting the nearest address is not that easy, but requires reverse geocoding, and to be honest I don't see the point in doing it. You would have to make special cases for the occurences where there couldn't be found a closest address and stuff like that.
If you really want to do it though there is a webservice you can call to do it.