Does i can do that kind of google infoWindows with the infoWindows function from google map api 3 when i click on the marker ?
http://i40.tinypic.com/25unplc.png
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I am not even able to do a line break in those information windows...
Add html code to your infowindow to apply styles like:
var contentString = '<div id="content">'+
'<h2>Meta Creation</h2><br/>'+
'<div id="bodyContent">'+
' '+
'</div>'+
'</div>';
infowindow.setContent(contentString);
NOTE: Just used some of the html tags to show example. Change according to your requirement.
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 am a new beginner try to add a google map in my website, and there have some problems.
I am trying to add some markers with the infobubble in the google map, then i want to add inside the infobubble content, after click on the , a function will be call, but infobubble seems different with infowindow, i have try to search many methods and still can't do this.
Here is my example:
function createMarker(point, locations, map) {
var content = '<a id="test" href="#">Deatils Information</a>';
var infoBubble = new InfoBubble({
minWidth: 300,
minHeight: 150,
padding: 15,
hideCloseButton: true,
borderRadius: 0,
content: content
});
var marker = new google.maps.Marker({
position: point,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infoBubble.open(map, marker);
});
};
I have search and find many examples,
$("#test").live("click", function(){
alert("clicked");
});
this function is only work inside the infowindow.
and
$(infoBubble.bubble_).live("click", function() {
alert('clicked!');
});
this function do not have any response,
if there any methods can do this function? Or somethings i should be read if i want to solve this problems? Please give me some hints. Thank you very much!!
Your problem is the HTML "string" in the infobubble is not part of the DOM until after the infobubble is created and rendered.
This should work:
function testClick() {
alert("clicked!");
}
and in your infowindow/infobubble:
var content = '<a id="test" href="javascript:testClick();">Deatils Information</a>';
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
What I want to acchieve (and couldn't find anything so far) is that the infoWindow is not attached to the marker. I'd like to place it on a static position in my viewport and just exchange the content based on what marker is clicked.
Q: How can I place (and not just offset) a google maps marker infowindow on a fixed location.
Answering my own Q - in case someone needs this:
// Add somewhere before creating your map to hide the info window as long as it got no content:
<script type="text/javascript">
jQuery( '#info' ).hide();
</script>
<script type="text/javascript">
function createMarker( lat, lng, whatever ) {
// map_object_name = the name of your map when you init()
html = "<strong>" + whatever + "</strong>";
var marker = new google.maps.Marker( {
map: map_object_name,
position: new google.maps.LatLng( lat, lng )
} );
// This snippet adds the content on the fly (when you click the marker)
google.maps.event.addListener( marker, 'click', function() {
// This pans the viewport/centers the marker in your viewport
map_object_name.panTo( new google.maps.LatLng( lat, lng ) );
// This shows the html-element with the id "info" and adds the html content
jQuery( '#info' ).show();
// This clears the content before you add new one
jQuery( '#info' ).empty();
jQuery( '#info' ).append( html );
// Commented out - just as reference
// infoWindow.setContent( html ); // the original infoWindow as you know it from Google Maps
// infoWindow.open( map_object_name, marker ); // the same, just the callback
} );
}
</script>
The "placing"/positioning of the #info element can than be done with normal html & css.