Develop Reference

Google Maps API control InfoWindows with Javascript after they are created [duplicate]

This question already has an answer here:
Open infoWindows from an external link outside of the google map
(1 answer)
Closed 4 years ago.
I am displaying markers and info windows on a Google Map using the following (partial) code. I have a listener setup so that when you click a marker, the corresponding info window shows (attached to the marker).
My question is, how can I access the info windows outside of this listener? For example, if I wanted to write Javascript to arbitrarily choose an info window and display it over its marker, can I do that by using its ID somehow?
This code was mostly taken from Google example scripts.
var bounds=new google.maps.LatLngBounds();
var infowindow=new google.maps.InfoWindow(), marker, i;
for (i=0; i<markerLength; i++){
var position=new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker=new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
setmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function(){
infowindow.setContent(infocontent[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

You could use the position of the marker in an array (if you know it) or you could assign your markers with some custom id property and trigger a click event on a specific marker based on that id.
var map = null;
var markers = [];
var infowindow = new google.maps.InfoWindow();
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787, -79.359741),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Setup three markers with info windows
var point;
point = new google.maps.LatLng(43.65654, -79.90138);
createMarker(point, 'This is marker with id aaa', 'aaa');
point = new google.maps.LatLng(43.91892, -78.89231);
createMarker(point, 'This is marker with id abc', 'abc');
point = new google.maps.LatLng(43.82589, -79.10040);
createMarker(point, 'This is marker with id ccc', 'ccc');
}
function createMarker(latlng, html, id) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
myCustomId: id
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
function clickMarker(id) {
// Loop through markers array
for (var i=0; i<markers.length; i++) {
// Check custom id
if (markers[i].myCustomId === id) {
// Trigger marker click
google.maps.event.trigger(markers[i], 'click');
}
}
}
initialize();
#map_canvas {
height: 150px;
}
<div id="map_canvas"></div>
<hr>
<button onClick="clickMarker('aaa')">Marker with id aaa</button>
<button onClick="clickMarker('abc')">Marker with id abc</button>
<button onClick="clickMarker('ccc')">Marker with id ccc</button>
<script src="https://maps.googleapis.com/maps/api/js"></script>

ionic, how to display correct infowindow on google maps?

I have several markers in a google map using their javascript API and I want to display an info window on top of the tapped marker, however when you tap in one of the markers in opens the info window in the last marker created not in the corresponding marker, sample code:
for(var i = 0; i < points; i++) {
var randomLatLong = new google.maps.LatLng(position.coords.latitude + getRandomArbitrary(-radius, radius), position.coords.longitude + getRandomArbitrary(-radius, radius));
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: randomLatLong,
});
var infoWindow = new google.maps.InfoWindow({
content: "Here is something to see!"
});
marker.addListener('click', function () {
infoWindow.open($scope.map, marker);
});
}
here is a codepen:
http://codepen.io/ospfranco/pen/yOPpey
just tap on one of the markers and te info will open on other marker
Anyone knows how to solve this?

Just change 'marker' to 'this' in your listener.
marker.addListener('click', function () {
infoWindow.open($scope.map, this);
});

Google-map , Only the last infoWindow is added

I have an issue to add infoWindow to my markers generated by a FOR loop.
I want to generate a infoWindow to each marker.
I see only the last infoWindow is added, even if I clic to other marker, this infoWindow is shown in the last marker see screenshot
Here is my loop to create markers and infowindows :
for (var i in data) {
var rssi = data[i].rssi;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data[i].lat, data[i].lng),
title: data[i].rssi,
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: 'This is the marker:'+i
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
markers.push(marker);
}

you need to find the current marker then get the info object from it.try this:
use:
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map,this );
});
<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></script>
<script>
var markers=[];
function plotmap(){
var gm = google.maps;
var map = new gm.Map(document.getElementById('map_canvas'), {
mapTypeId: gm.MapTypeId.SATELLITE,
center: new gm.LatLng(17.00,78.43), zoom: 10
});
var data=[{'rssi':"fgfghfgh",'lat':"17.43",'lng':"78.43"},{'rssi':"new one",'lat':"17.49",'lng':"78.53"}];
for (var i in data) {
var rssi = data[i].rssi;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data[i].lat, data[i].lng),
title: data[i].rssi,
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: 'This is the marker:'+i
});
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map,this );
});
markers.push(marker);
}
}
</script>
<div id="map_canvas" style="width:600px;height:500px;"></div>
<script>
plotmap();
</script>

I think you should open infoWindow on given index, otherwise it's always referenced to the last loop item. So in click event you should open infoWIndow in a given i
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker[i]);
});
I guess if you click in a different marker then you will have a two open infoWindow. If you want to always keep a one open you can store currentOpen index and close it before open a new one.

In fact the problem was in
marker.info.open(map, marker);
Thet should be
marker.info.open(map, this);

reopen infowindow after it's closed in Google map

I have a map with streetview panorama, an infowindow and a draggable marker. After the marker is dragged, a function requests the getPanoramaByLocation to see whether the view service is available. If it's not, it closes the infowindow. That is great but when I click again on the marker the infowindow does not open anymore. Do you know what is wrong please?
tx
var sv = new google.maps.StreetViewService();
function initialize() {
var optionMap = {
zoom: 13,
center: new google.maps.LatLng(47.390251,0.68882),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("mapDiv"), optionMap);
var optionsMarker = {
position: new google.maps.LatLng(47.390251,0.68882),
map: myMap,
draggable: true,
title: "my marker"
}
var marker = new google.maps.Marker(optionsMarker);
var infowindowDiv = '<div id="streetview" style="width:300px;height:200px;"' +'</div>';
var infoWindow = new google.maps.InfoWindow({
content: infowindowDiv,
position: myMap.getCenter() });
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(myMap, marker);
});
google.maps.event.addListener(infoWindow, 'domready', function() {
var panorama = new
google.maps.StreetViewPanorama(document.getElementById("streetview"));
panorama.setPosition(infoWindow.getPosition());
google.maps.event.addListener(marker, 'dragend', function(event) {
sv.getPanoramaByLocation(event.latLng, 50, processSVData);});
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
}
else {
infoWindow.close();
infoWindow = null;
};
}
});
}

From the GMaps API docs:
close() None Closes this InfoWindow by removing it from the DOM structure.
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
So... If you close the infowindow, it's gone. For ever. All the more so if you REALLY make sure it's gone by saying "infoWindow = null;" You have to make a new one. My advice would be to refactor your code to have a separate function that creates the infowindow on demand and returns it. In your click event definition, check whether infowindow is null, and if so, grab a new one.
HTH

As the other answer explain, the infobox html is removed from DOM when the user clicks the close button, but the JS object still there.
When you create an infowindow you must call the open method to see it on the map
myInfoWindow.open(mymap);
So, if you listen to the 'closeclick' event and keep the infowindow state
var infoWindowClosed = false;
google.maps.event.addListener(myInfoBox, "closeclick", function () {
infoWindowClosed = true;
});
you can reopen myInfoWindow on demand
if(infoWindowClosed){
myInfoWindow.open(mymap);
}

Google Maps infoWindow only loading last record on markers

I'm trying to load a google map with dynamic markers and dynamic infoWindows to go with them. Basically I've got the markers working. The infoWindows are clickable and closable, however they do not have the correct content. It seems that the content for every infoWindow is the last record that is found in the query loop. You will see whats happening here Here's the code:
<script type="text/javascript">
//Load the Google Map with Options//
function initialize() {
var myLatlng = new google.maps.LatLng(42.48019996901214, -90.670166015625);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//Begin query loop to set the markers and infoWindow content//
<cfoutput query="GetCoord">
var LatLng = new google.maps.LatLng(#Client_Lat#, #Client_Lng#);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "#Client_Company#"
});
var contentString = '<p><b>#Client_Company#</b><br>'+
'#Client_Address#<br>'+
'#Client_City#, #Client_State# #Client_Zip#<br>'+
'View Details';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
</cfoutput>
//End query loop
}
</script>
Any ideas on why this is happening?

Add content as a property to marker object and use this.content in the event handler:
var marker = new google.maps.Marker(options);
marker.content = '<div>Content goes here....</div>';
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(this.content);
infoWindow.open(this.getMap(), this);
});

In your code you statically set the infowindow content on load with
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Then when your markers are clicked you are just opening that infowindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
this will display the same content for every marker, you do not want this.
what you want to do is create only one infowindow with no content (before your marker loop). then when a marker is clicked attach the content to the info window... then open the infowindow. This will save lines of code and cause the infowindow to close automatically.
before creating your markers (with the loop) add this
infowindow = new google.maps.InfoWindow();
in your marker code add the infowindow.setContent call
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});