We Keep Coding

Only open one infowindow at a time

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 );
});
}

Google Maps Closing infowindow auto centers

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);
});`

Centering marker after closing infowindow in Google Map API v3

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());
});

Unable to add event on Google map Infobox

I am using Infobox with Google Map V3 (attached image). While clicking on Infobox, I want to go to a details page. But I am not able to add a click listener on the infobox. Here is the code I am using:
This is my infobox config:
var ib = new InfoBox({
alignBottom : true,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-125, -50),
zIndex: null,
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation:false
});
And I added listener to this infobox like this:
google.maps.event.addListener(ib, 'domready', function() {
if(Ext.get(ib.div_)){
Ext.get(ib.div_).on('click', function(){
console.log('test on click')
}, this);
Ext.get(ib.div_).on('mousedown', function(){
console.log('test on click')
}, this);
}
});
While enableEventPropagation = false, the event doesn't propagate to MAP but no event is working on the infobox.
While enableEventPropagation = true, the events (click, mousedown) works but clicking on other part of the infobox, it takes me to map or another marker.
Any idea how to solve this?

You need to add domready event to infobox's eventListener not to google maps' one. Only after infobox's html is on screen, you can bind event. To prevent multi event binding, close other infobox before you load a new one.
infobox= new InfoBox();
google.maps.event.addListener(marker, 'click', function() {
infobox.close();
infobox= new InfoBox({ ... });
infobox.open(map, this);
infobox.addListener("domready", function() {
$("#target").on("click", function(e) { /* do something */ });
});
});

You can attach a listener to whatever is the content of your InfoBox.
var boxText = document.createElement('div');
var myOptions = {
content: boxText,
...
}
var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
boxText.setAttribute('onclick', 'alert("InfoBox clicked")');
Would that work for you ?

google maps api v3 - open infowindow from an external click

So i have a V3 map which is initialised like this:
function init() {
var mapCenter = new google.maps.LatLng(51.5081289,-0.128005);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 6,
'center': mapCenter,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
panControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
});
and a load of markers that look like this:
var marker25837500 = new google.maps.Marker({
map: map,
pop_title: 'blah blah',
pop_wind: 'more blah',
zIndex: 999,
icon: 'images/map_icons/s6.png'
});
google.maps.event.addListener(marker25837500, 'click', onMarkerClick);
and lastly i have a function to open the infowindow on he click of each maker:
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick = OpenInfoWindow;
function OpenInfoWindow() {
var marker = this;
infoWindow.setContent('<h3>' + marker.pop_title + '</h3>' +
marker.pop_body);
infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
My question is, what do i need to do to make a particular marker (say marker25837500) show its infowindow when a inside the page is clicked - perhaps something like:
<div id="marker25837500">click to see infoWindow!</div>
I'm sure it's easy but i just can see my way though it!
Thanks

You might use trigger event.
$('#marker25837500').click(function () {
google.maps.event.trigger(marker25837500, 'click')
})
Check this- https://developers.google.com/maps/documentation/javascript/reference#event
Edit: Also noticed that you are calling onMarkerClick() when marker25837500 is clicked, but you named the other function OpenInfoWindow() so you might need to change that too.

You don't have to do anything unusual or simulate a click on the marker; just make sure the OpenInfoWindow function can be reached:
//This is the simple case:
var myDiv = document.getElementById( "marker25837500" );
google.maps.event.addDomListener( myDiv, "click", OpenInfoWindow );
//Or if you have other things that you want to accomplish when this occurs:
var myDiv = document.getElementById( "marker25837500" );
google.maps.event.addDomListener( myDiv, "click", function() {
OpenInfoWindow();
//Do other stuff here
});
As long as the InfoWindow is in scope (can be reached when the OpenInfoWindow function is called), this should work fine.