Develop Reference

How to remove an empty div created by Google Maps InfoWindow (Close info window on map click also close older info window's when opening new one)

For some reason, Google is rendering an empty div in Google Maps infoWindow card. I'm following the normal practice in which I'm initiating Google Maps via initMap() and to add infoWindow I'm using:
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
How do I remove this div? or place my content in the div?

For deleting a div in javascript you can simply use remove() function via dot notation.
Just like this:
document.getElementById("element").remove();
But since you don't have a special id or class in your desired DOM item that couldn't be a solution. So you have to get the parent node and remove its children. All you have to do is to use removeChild(/*element.lastChild*/). So it will be something like this:
const element = document.querySelector('.gm-style-iw-d');
element.removeChild(element.lastChild);
UPDATE
If you want to disable the context menu in your other div to make them look like the same, there are two ways to do that.
First, you can do this by manipulating HTML itself like this:
<div oncontextmenu="return false;"></div>
Or by manipulating the DOM after the initial load:
HTML
<div id='elementId'></div>
Javascript
document.getElementById('elementId').addEventListener('contextmenu', function() {
return false;
});
UPDATE 2
This is not the best approach to achieve what you wanted but you can do this in order to close the dialog whenever the user clicks anywhere in the map except marker and dialog itself. According to the google map document you can use .close() method to close InfoWindow just like this:
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map,
});
// Check for custom icon
if (props.iconImage) {
// Set icon image
marker.setIcon(props.iconImage);
}
// Check content
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
setTimeout(() => {
var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
}, 1);
});
}
google.maps.event.addListener(map, "click", function(event) {
infoWindow.close();
});
}
UPDATE 3
To achieve closing old infoWindow you should create a unique infoWindow and update its content to having just one that gets closed/opened on each marker.click. So in this way, it will be working like a charm.
var infoWindow = null;
// Add marker function
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map,
// icon: './img/marker1.png'
});
// Check for custom icon
if (props.iconImage) {
// Set icon image
marker.setIcon(props.iconImage);
}
// Check content
if (props.content) {
google.maps.event.addListener(marker, 'click', function() {
if (infoWindow) {
infoWindow.close();
}
infoWindow = new google.maps.InfoWindow({
content: props.content
});
infoWindow.open(map, marker);
setTimeout(() => {
var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
}, 10);
});
}
google.maps.event.addListener(map, "click", function(event) {
infoWindow.close();
});
}
Here is the link to the working demo: JSFiddle

Open info window on load Google Map

I'm wondering if it's possible to open one of the infoWindow objects that are attached to each marker in the code below on page load and not just by clicking on them? As it is now, the user has to click on one of the markers to open an info window.
I tested to create a "stand alone" info window object and that opened fine onload, but it didn't close when I clicked on some of the other markers, because the onClick function was attached to the markers that only could close the info windows attached to that object. Correct med if I'm wrong?
Would this be possible and can I "call" an object by the number or what options do I have? Tips are preciated!
Or if there is possible, that I have tried to open an separate info window onload and be able to close that if I open one of the other info windows!?
var map = null;
var infowindow = new google.maps.InfoWindow();
var iconBase = 'images/mapNumbers/number';
//var zoomLevel = 11;
//var mapPositionLat = 55.678939;
//var mapPositionLng = 12.568359;
function initialize() {
var markerPos = new google.maps.LatLng(55.674196574861895, 12.583808898925781);
var myOptions = {
zoom: 11,
//center: new google.maps.LatLng(55.678939, 12.568359),
center: markerPos,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function () {
infowindow.close();
});
google.maps.event.addListener(map, 'zoom_changed', function () {
infowindow.close();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(markerPos);
map.setZoom(zoomLevel);
//var center = map.getCenter();
});
// Add markers to the map
var point;
point = new google.maps.LatLng(55.667093,12.581255); createMarker(point, "<div class='infoWindow'>1</div>");
point = new google.maps.LatLng(55.660794,12.58972); createMarker(point, "<div class='infoWindow'>2</div>");
point = new google.maps.LatLng(55.660491,12.587087); createMarker(point, "<div class='infoWindow'>3</div>");
}
// Create markers
function createMarker(latlng, html, name, number) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name,
icon: iconBase + number + '.png'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
//map.setCenter(marker.getPosition());
map.setCenter(55.678939, 12.568359);
});
}
google.maps.event.addDomListener(window, 'load', initialize);

In order to display InfoWindow when the map loads, make the call to
infowindow.open(map, marker);
outside of the marker listener.
Below is demonstrated createMarker function, where parameter displayInfoWindow defines whether to display InfoWindow when the map loads:
// Create marker
function createMarker(map,markerPos, markerTitle,infoWindowContent,displayInfoWindow) {
var marker = new google.maps.Marker({
position: markerPos,
map: map,
title: markerTitle,
});
var infowindow = new google.maps.InfoWindow({
content: infoWindowContent
});
if(displayInfoWindow) {
infowindow.open(map, marker);
}
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
Example: http://jsbin.com/lusuquwu/1/

It is possible. One possible solution is to save markers to an array and then trigger click event on of one of them using google.maps.event.trigger(). For example:
...
var zoomLevel = 11; // uncommented due to error message
var markers = [];
function initialize() {
...
point = new google.maps.LatLng(55.660491,12.587087); createMarker(point, "<div class='infoWindow'>3</div>");
google.maps.event.trigger(markers[1], 'click');
}
function createMarker(latlng, html, name, number) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name,
//icon: iconBase + number + '.png'
icon: iconBase
});
// added to collect markers
markers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
console.log('click event listener');
infowindow.setContent(html);
infowindow.open(map, marker);
//map.setCenter(marker.getPosition());
// corrected due to error
map.setCenter(new google.maps.LatLng(55.678939, 12.568359));
});
}

I combined info from this and another site to come up with the below solution as most solutions are for multi-marker maps.
Just a few lines is all you actually need.
// Start with your map
var map = new google.maps.Map(...);
// Now define the info window using HTML. You can insert images etc.
var info = new google.maps.InfoWindow({content: 'YOUR HTML HERE'});
// Now define the marker position on the map
var marker = new google.maps.Marker({map: map, position:{lat: 'YOUR LATITUDE',lng: 'YOUR LONGITUDE'}});
Now we have the variables, just hide the marker, show the info window and set the map zoom and center.
// Set the map zoom
map.setZoom('YOUR ZOOM LEVEL [1 - 20]');
// Set the map center
map.setCenter({lat: 'YOUR LATITUDE',lng: 'YOUR LONGITUDE'});
// Hide the marker that we created
marker.setVisible(false);
// Open the info window with the HTML on the marker position
info.open(map, marker);
For the content, you can create layers and insert images and text as you need. Just make sure you include the full URL to images in your html.
I also recommend adding this to your CSS to hide the close button, which effectively makes this a permanent, info window.
.gm-style-iw + div {display: none;}

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

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

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