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

Click events not triggered in firefox (Google Maps)

This code fine work in all browser, except firefox browser.
Event click don't work.
var marker = new RichMarker({
position: new google.maps.LatLng( _latitude, _longitude ),
map: map,
draggable: draggableMarker,
content: markerContent,
flat: true
});
google.maps.event.addListener(marker, "click", function(event) {
alert(this.position);
});
How I can fix that? Thx.

The issue seems to be line 615 of http://googlemaps.github.io/js-rich-marker/src/richmarker.js
this.markerWrapper_.setCapture(true);
When you add a click-listener to a marker internally the click-event will be triggered when you click on the content of the marker. With the above line the click-event will fire for the wrapper of the content only(happens when a marker is draggable).
You'll need to modify the function addDraggingListeners_, set it to:
RichMarker.prototype.addDraggingListeners_ = function() {
var that = this;
this.draggingListeners_ = [
google.maps.event.addDomListener(window, 'mousemove', function(e) {
that.drag(e);
}, true),
google.maps.event.addDomListener(window, 'mouseup', function() {
that.stopDrag();
}, true)
];
};

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

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.

Conflict: when loading childpage, JavaScript is not working

I am trying to integrate this particular app in my website.
When I load it as content to my main page my jquery menu from the main page stops working. It seems there is a conflict here.
Here is the script from the childpage:
<script type='text/javascript'>
$(function() {
var bucharest = new google.maps.LatLng(44.436055, 26.097593),
pointToMoveTo,
first = true,
curMarker = new google.maps.Marker({}),
$el;
var myOptions = {
zoom: 13,
center: bucharest,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
$("#locations li").mouseenter(function() {
$el = $(this);
if (!$el.hasClass("hover")) {
$("#locations li").removeClass("hover");
$el.addClass("hover");
if (!first) {
// Clear current marker
curMarker.setMap();
// Set zoom back to Bucharest level
// map.setZoom(10);
}
// Move (pan) map to new location
pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
map.panTo(pointToMoveTo);
// Add new marker
curMarker = new google.maps.Marker({
position: pointToMoveTo,
map: map,
icon: "images/marker.png"
});
// On click, zoom map
google.maps.event.addListener(curMarker, 'click', function() {
map.setZoom(14);
});
// Fill more info area
$("#more-info")
.find("h2")
.html($el.find("h3").html())
.end()
.find("p")
.html($el.find(".longdesc").html());
// No longer the first time through (re: marker clearing)
first = false;
}
});
$("#locations li:first").trigger("mouseenter");
});
Here is the script for the menu in main page:
$(document).ready(function() {
$("ul#nav li a").addClass("js");
$("ul#nav li a").hover(
function () {
$(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
$(this).animate({backgroundPosition:"(0 -5px)"}, 150);
},
function () {
$(this).animate({backgroundPosition:"(0 -149px)"}, 200);
}
);
});
Is there a conflict between these two?
Thank you!

I think there is an error in your first document.ready
here : $(function() {
So the second document.ready
this one : $(document).ready(function() {