I'm looking for a way to re-center the map marker after closing the infowindow. This is what I have and it's not working.
google.maps.event.addListener(infoWindow, 'closeclick', function() {
map.panTo(marker.getPosition());
});
I got it to work. Here's the code:
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.panTo(marker.getPosition());
});
Related
I'm creating a Google map with multiple markers. At the moment each marker has an infowindow, how can I only have one infowindow open at a time?
At the moment it closes all windows on clicking the map.
I know this question has been asked a few times but the code seems vastly different to mine.
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
google.maps.event.addListener(map, 'click', function(event) {
if (infowindow) {
infowindow.close(); }
});
}
Try this: declare just one infowindow (global to the map, not one by marker).
var infoWindow;
...
if( $marker.html() ){
google.maps.event.addListener(marker, 'click', function() {
if (infoWindow) infoWindow.close();
infoWindow = new google.maps.InfoWindow({
content : $marker.html()
});
infoWindow.open( map, marker );
});
}
How I can get maker ID when click it?
google.maps.event.addListener(marker, 'click', function() {
var locationTitle=marker;
infowindow.setContent(contentString);
infowindow.open(map, marker);});
Try this one
google.maps.event.addListener(marker, 'click', function() {
window.location = "www.cickstart.com/" + marker.id;
});
I am trying to detect when a maps container has changed so that I can run google.maps.event.trigger(map, 'resize'); but I can't seem to get it to work. Is there a Listener to detect when the container has changed size? I know it doesn't work as the map will have a section which is greyed out.
I have trie the following but all seem to fail when the container size has changed, bounds_changed works when the map is dragged by my cursor.
google.maps.event.addListener(map, 'bounds_changed', function() {
google.maps.event.trigger(map, 'resize');
});
google.maps.event.addDomListener(map, 'resize', function() {
google.maps.event.trigger(map, 'resize');
});
map declaration and init()
var map, mapOptions, mapElement,valMap,valZoom;
google.maps.event.addDomListener(window, 'load', init);
function init() {
mapOptions = {
zoom: 2,
center: new google.maps.LatLng(40.697299 , -73.809815),
panControl:true
};
mapElement = document.getElementById('map');
map = new google.maps.Map(mapElement, mapOptions);
mapCenter();
mapZoom();
google.maps.event.addListener(map, 'center_changed', function() {
mapCenter();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
mapZoom();
});
google.maps.event.addListener(map, 'bounds_changed', function() {
google.maps.event.trigger(map, 'resize');
});
}
key up resize
$("#width, #height").keyup(function() {
delay(function(){
size();
}, 500 );
console.log('0');
mapElement = document.getElementById('map');
console.log(mapElement);
google.maps.event.addDomListener( mapElement, 'resize', function(e){
console.log( 'Resize', e);
google.maps.event.trigger(map, 'resize');
console.log('1');
});
console.log('2');
});
Have you tried using something like google.maps.event.addDomListener( mapElement, 'resize', function(e){console.log( 'Resize', e)} );?
Maybe the listener for the Map object doesn't support 'resize'.
Edit: JSFiddle
I have this code that if the user clicks any part of the map all infowindows should close. But I have no idea why it's not working.
How I open my infowindow:
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
What I have to close all upon map click:
google.maps.event.addListener(map, 'click', function() {
infowindow.close(map, marker);
});
EDIT: Having a hard time finding a solution. Most threads that show are about close icon if one is open.
If you have only one marker on your map, named "marker", this should work:
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
As long as the function is run where both the "map" variable and the "infowindow" variable are in scope.
I've added a map to my site using Google Maps API V3.
I've got everything working except this:
how do i get the map to auto center when i close the info window?
sample code :
var myLatlng = new google.maps.LatLng(1.0, -1.0);
google.maps.event.addListener(infowindow, 'closeclick', function () {
map.setCenter(myLatlng);
});
really stuck and would appreciate any suggestions!
try this
google.maps.event.addListener(infowindow, 'closeclick', function () {
map.setCenter(this.getPosition());
});
You must have some mistake somewhere in your code, because it works for me:
http://jsfiddle.net/SZ3XC/
var infowindow = new google.maps.InfoWindow({
content: 'ahoj'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
var myLatlng = new google.maps.LatLng(1.0, -1.0);
google.maps.event.addListener(infowindow, 'closeclick', function () {
map.setCenter(myLatlng);
});
Thank you for the jsfiddle. I got it to work on my map as well as added an option to zoom back out to the full map when clicking off the infowindow. Here's an example:
var mapCenter = new google.maps.LatLng(0,22);
`google.maps.event.addListener(infowindow, 'closeclick', function () {
map.setCenter(mapCenter);
var opt = { zoom: 2};
map.setOptions(opt);
});`