Develop Reference

Google maps - reuse single infoWindow for multiple markers

I have multiple markers and currently when more than one infoWindow is clicked, the other already-opened infoWindows stay open, cluttering the map. I would prefer it if I could simply reuse a single infoWindow, move it and update it's content. This is what I am attempting to do below:
var info = new SnazzyInfoWindow ();
/*
* Loop through each item in the 'features' array, including info windows, and display the marker
*/
features.forEach(function (feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var infoContent = feature.contentImage + feature.content;
marker.addListener('click', function() {
infoCallback(infoContent, marker);
});
});
function infoCallback(infoContent, marker) {
return function() {
info.close();
info.setContent(infoContent)
info.open(map, marker);
};
};
However I am receiving the error Cannot read property 'placement' of undefined and can't seem to figure out what's wrong here.
Note that I am using the "Snazzy Info Window" plugin, but I think the same would apply to the stock infoWindow.

Yes. Inside the onClick function, when marker.addListener('click' is being executed, you don't have feature/marker. The variables are not what they were when the foreach was executed.
One trick I mostly use, is to make an array of the marker objects. Inside the onClick you search for the 'this' marker inside the array.
Something like this:
var markers = []; // store the markers in this array
features.forEach(function (feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
markers.push(marker);
marker.addListener('click', function() {
// first find out which marker was clicked on
var index = markers.indexOf(this); // this represents the marker that was clicked on
// index should be the same index as the index for features.
var feature = features[index];
var marker = markers[index];
var infoContent = feature.contentImage + feature.content;
// now we can call infoCallback.
infoCallback(infoContent, marker);
});
});

Adding an Infobox to GoogleMaps?

I'm trying to add an infobox to a number of pins on a Google map.
I've got the infobox to work previous - JSfiddle.
But i've now altered the code to include a dropdown menu. I've tried to add the infoboxes again but it doesn't work and i don't understand why it doesn't. JSfiddle.
I've copied and pasted the code for the infoboxes, checked that the variable names still match up, and that the code is in the same order.
The following code is where the marker is added to the map and i'm trying to add an infobox. The function addMarker is sat within my initialisation function. And var infowindow is sat beneath the initialisation function.
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: feature.icon,
map: map,
size: 20,
title: name,
draggable: false,
//animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', (function (marker) {return function () {
var Infocontent = feature.desc;
infowindow.setContent(Infocontent);
infowindow.open(map, marker); //'mouseover'
}
})(marker));
}
var infowindow = new google.maps.InfoWindow();
May someone please tell me where i've gone wrong?

I just updated your code by creating a new fiddle and now it is showing infowindow. I just moved your infowindow code within listener definintion.
Please check
google.maps.event.addListener(marker, 'click', (function (marker) {return function () {
console.log('called');
var Infocontent = feature.desc;
infowindow = new google.maps.InfoWindow();
infowindow.setContent(Infocontent);
infowindow.open(map, marker); //'mouseover'
}
})(marker));
JSFiddle

Add multiple markers with Google Maps API v3

I have the following function to add one single marker but I want to add multiple markers by clicking on the map. I have Googled but I can't get any straight answer on how I can solve this problem.
function placeMarker(location) {
if(marker) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: gm_map,
draggable: true
});
}
}
I know I need to use Array() but I don't know exactly how. How can I solve my problem?
DEMO: removed because the problem has been solved.

Do you need to use the marker variable outside of the placeMarker function? Your function is not deleting the marker, it is checking to see if the marker variable exists and moves the marker using the setPosition function. You need to remove that line if you want multiple markers to exist.
function placeMarker(location) {
//marker variable will only exist inside this function
var marker = new google.maps.Marker({
position: location,
map: gm_map,
draggable: true
});
}
Here is an example: http://jsfiddle.net/bryan_weaver/aEyfW/

Ok, you need to have an event listener for the 'click' event on the map. And this needs to pass the currently-clicked location to your placeMarker function. Try this (add this event listener in the same place where you initialise your map)
google.maps.event.addListener(gm_map, 'click', function(event) {
placeMarker(event.latLng);
});
And modify your placeMarker function, so instead of having one global variable marker which you update with each click, create a new marker each time:
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: gm_map,
draggable: true
});
}

Adding Event Listener causes Google Map to freeze

I am attempting to create a google map with markers on my page. I have an unordered list where each item has data attributes for latitude, longitude and title. Using JQuery I pull these values and produce a marker on the map for each item in the list. Everything seems to work OK except google maps will not load tiles as you pan around the map.
This is how I initialize the map:
var map;
// initialize google map
$(function () {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(CoordinatesLat, CoordinatesLong),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}
// initiate map
map = new google.maps.Map($("#map")[0], myOptions);
// when map is loaded, add events and behaviors to it
google.maps.event.addListenerOnce(map, 'tilesloaded', addEventsToMap(".event")); //commenting this line prevents GMAP problems
});
FYI - before I was using maps.event.addListener() and the map would work momentarily and then become completely unresponsive. Changing it to maps.event.addListenerOnce() stopped the freezing but still has the tile loading problem.
And this is the callback, where evidently I've done something wrong:
//add events from event list to map. add behavior to events ie. mouseover
function addEventsToMap(selector) {
$(selector).each(function (i, $e) {
$e = $($e);
var latlng;
if ($e.attr("data-geo-lat") && $e.attr("data-geo-long")) {
latlng = new google.maps.LatLng($e.attr("data-geo-lat"), $e.attr("data-geo-long"));
$e.marker = new google.maps.Marker({
position: latlng,
map: map,
title: $e.attr("data-title")
});
google.maps.event.addListener($e.marker, 'click', function () { window.location = $e.attr("data-href"); });
google.maps.event.addListener($e.marker, 'mouseover', function () { $e.addClass("event-hover"); });
google.maps.event.addListener($e.marker, 'mouseout', function () { $e.removeClass("event-hover"); });
//when mouse hovers over item in list, center map on it's marker
$e.mouseenter(function () {
map.panTo(latlng);
});
}
});
}
Any idea what could be causing this?

I see a problem, though I'm not sure if it's the issue here. If you examine this line:
google.maps.event.addListenerOnce(map, 'tilesloaded', addEventsToMap(".event"));
What you are intending to do is call your 'addEventsToMap' once the map is loaded, but instead what you are doing is calling the function and then assigning the return value of that as a listener.
You need this instead, and I think it shouldn't crash anymore.
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
addEventsToMap(".event");
});
If that doesn't work, I would recommend looking at the Javascript Console of whatever browser you are using, to see what error is happening to make the map crash.

trigger google maps marker click

I have a google map set up to find the user's current location, and center the map at that closest marker to their location. The markers, when clicked, open up an infobox (note this is a little different than an infoWindow - http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html). What I want to do, however, is automatically open up the nearest marker without the user actually clicking. Here's the code to trigger a marker opening:
//loop through all locations to add a marker:
addMarker = function(loc) {
var markerLoc = new google.maps.LatLng(loc.Lat, loc.Long);
var marker = new google.maps.Marker({
map: map,
position: markerLoc
});
google.maps.event.addListener(marker, "mousedown", function() {
var infoOpts = {
content: loc.markerText,
boxStyle: { background: "none transparent", width: "180px"},
pixelOffset: new google.maps.Size(-90, 0),
closeBoxMargin: "5px"
};
var ib = new InfoBox(infoOpts);
ib.open(map, marker);
});
markers.push(marker);
};
So somehow I have to trigger the mouseDown function of the appropriate marker, but it has to be done in a function outside of this one. I will have a reference to the appropriate marker in the array (markers[closestmarker]).

I see that this question has been sitting for quite awhile, but, just in case, this answer may be helpful:
trigger google maps marker click
The code would look like this:
var marker = new google.maps.Marker({});
new google.maps.event.trigger( marker, 'click' );

I found I needed to attach a click event to the marker like so
var marker = new google.maps.Marker({});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
new google.maps.event.trigger( marker, 'click' );