Here is a code of adding infoWindows and markers on google map:
infowindow = new google.maps.InfoWindow()
createMarker = (company)->
marker = new google.maps.Marker({
position: new google.maps.LatLng(company.latitude, company.longitude),
map: map,
title: company.name
})
google.maps.event.addListener(marker, 'click', ()->
content = 'some content'
infowindow.setContent(content)
infowindow.open(map,this)
)
createMarker(data[i]) for i in [0..data.length-1] by 1
I need to open first infoWindow automaticaly after page is loaded. How can I do it?
To fire an event:
google.maps.event.trigger(, 'click');
Now, you'll need to store the references to the "marker" variables. Change
marker = new google.maps.Marker({
for
company.marker = new google.maps.Marker({
and add a last line:
google.maps.event.trigger(data[0].marker, 'click');
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'm using the Google Maps API v3 to generate some minimaps. I have one custom marker in a small map with controls hidden. This works great. Now, I'd like to add a link so that clicking this marker will open the full Google Maps with this location selected. Seems obvious.
I'm creating a marker like this.
var pin = new google.maps.LatLng(myLat,myLong);
var marker = new google.maps.Marker({
position: pin,
map: map,
title:"Hello World"
});
This seems like it should be obvious, what am I missing? Do I need to construct my link and assign it myself?
This should work (not tested):
var pin = new google.maps.LatLng(myLat,myLong);
var marker = new google.maps.Marker({
position: pin,
map: map,
title:"Hello World"
});
google.maps.addListener(marker, "click", function() {
window.location = "https://maps.google.com/maps?ll="+pin.toUrlValue;
});
Working example (built on an existing example, not from the above code)
Ended up finding the answer thusly:
google.maps.event.addListener(marker, 'click', function() {
window.open("https://maps.google.com/maps?ll="+pin.toUrlValue(),'_blank');
});
My infowindows are not closing automatically when i click on the other marker..
here the code : http://pastebin.com/PvCt2z7W
here is the code for markers with infowindows
for (var n = 0 ; n <listFavourite.length ; n++)
//var favouriteObject =listFavourite[n];
addMarker(listFavourite[n]);
}
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lattitude, data.longitude),
map: map,
title: data.address
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">'+data.name+'</h2>'+
'<div id="bodyContent">'+
'<p>'+data.address+'</p>'+
'<p></p>'+
'<p>Do You Want to change search location</p>'+
'<input name="yes" id="yes" type="button" class="btn-common" value="Yes"/>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
maxWidth: 10,
});
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
};
i tried all the answers here but not able to work it properly
Any suggestions or help Would be appreciated
Instead of creating one infowindow for each marker, have one global infowindow variable. Then all you're doing in your marker click handler is updating the content for the marker each time. However your code will require this to be done with a closure, otherwise you're going to get each marker having the last marker's content.
var infowindow = new google.maps.InfoWindow({
maxWidth: 10
});
var arrMarkers = [];
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lattitude, data.longitude),
map: map,
title: data.address
});
arrMarkers.push(marker);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">'+data.name+'</h2>'+
'<div id="bodyContent">'+
'<p>'+data.address+'</p>'+
'<p></p>'+
'<p>Do You Want to change search location</p>'+
'<input name="yes" id="yes" type="button" class="btn-common" value="Yes"/>'+
'</div>'+
'</div>';
// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, contentString);
}
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
function clickLink(ID) {
google.maps.event.trigger(arrMarkers[ID], 'click');
}
Your HTML of sidebar links might look like:
Link 1<br>
Link 2<br>
...
The other option to using function closure (which basically involves using a createMarker function) is to save the content of the infowindow in a property of the marker. It still is simplest with a single infowindow. You haven't provided enough context in your pastebin to give you a working example that does that.
Here is an example that uses function closure to associate the infowindow content with the marker and has a single infowindow (translated from Mike Williams' v2 tutorial).
http://www.geocodezip.com/v3_MW_example_map3.html
Mike Williams' description of function closure
Here is an example that doesn't use function closure (it stores the infowindow content in a property of the marker object):
http://www.geocodezip.com/v3_MW_example_map3_noclosure.html
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
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);
});