This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 9 years ago.
Using a loop to show markers on Google Maps, I am finding that previous windows wont close even though I have a listener
Here is my code (set to limit number to 50 deliberately) that displays a marker if a user has location info set
function loadGmodule() {
var map = new google.maps.Map(
document.getElementById('gmashup'), {
center: new google.maps.LatLng(20, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i=0;i<50;i++) {
u = users[i];
if (u.lat) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(u.lat, u.lang),
map: map
});
infoContent[i] = '<table ><tr><td><img src=\"'+u.avatar+'\" width=\"60\" height=\"75\"></td>';
infoContent[i] = infoContent[i] + '<td><b>'+u.firstname+' '+u.middlename+' '+u.lastname+'</b><br />'+u.designation + '<br />'+u.company+'<br />'+u.city+'</td>';
infoContent[i] = infoContent[i] + '</tr></table>';
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(infoContent[i]);
addInfoWindowOnEvent(marker, infoWindow, map, 'click');
}
}
}
and the function / listener
function addInfoWindowOnEvent(marker, infoWindow, map, event) {
google.maps.event.addListener(marker, event, function () {
infoWindow.close();
infoWindow.open(map, marker);
});
}
Can anyone advise the best location to put the infoWindow.close() so that previous windows will shut when another pin is clicked.
Thanks in advance for any assistance
Even though the edited indicated a duplicate, it was not to be found in the supplied link.. HOWEVER (even though I think this is a hack, but it will do) there was an answer here which worked
Google Maps API v3 (one infowindow open at a time)
I changed my function to
function addInfoWindowOnEvent(marker, infoWindow, map, event) {
google.maps.event.addListener(marker, event, function () {
if($('.gm-style-iw').length) {
$('.gm-style-iw').parent().remove();
}
infoWindow.open(map,marker);
});
}
and now only one window stays open
For each marker you are creating new infowindow. If you want to close previous infowindow and have only one opened then it is enough to create only one infowindow. It should be global:
var infoContent = [];
var infoWindow;
function loadGmodule() {
var map = new google.maps.Map(
...
infoWindow = new google.maps.InfoWindow();
//for (var i = 0; i < 50; i++) {
for (var i = 0; i < users.length; i++) {
...
and then provide specific content to event listener:
...
infoContent[i] = infoContent[i] + '</tr></table>';
//infoWindow = new google.maps.InfoWindow();
//infoWindow.setContent(infoContent[i]);
addInfoWindowOnEvent(marker, infoContent[i], map, 'click');
}
}
}
function addInfoWindowOnEvent(marker, infoContent, map, event) {
google.maps.event.addListener(marker, event, function () {
infoWindow.close();
infoWindow.setContent(infoContent)
infoWindow.open(map, marker);
});
}
Related
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>
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);
});
I'm trying to display a Google map in a Bootstrap modal with multiple markers. I have found several posts where people were having problems displaying the map on the modal with just one marker, but none with multiple markers. This is what I currently have, but my map is just showing up gray.
var locations = [...]
var complexMap = new google.maps.Map(document.getElementById('complexes-modal-map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][3],
map: complexMap
});
//extend the bounds to include each marker's position
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(complexMap, marker);
}
})(marker, i));
}
$("#complexes-modal-map-canvas").on("shown.bs.modal", function () {
var currentCenter = complexMap.getCenter();
google.maps.event.trigger(complexMap, "resize");
complexMap.setCenter(currentCenter);
complexMap.fitBounds(bounds);
});
There are 2 things I had to do to make this work. The first thing was an obvious mistake - I was selecting the incorrect element on the "shown.bs.modal" method. I needed to select my Bootstrap modal, not the Google Map. The second thing was to call the "fitBounds" method before calling the "resize" event and setting the center.
$("#complexes-modal").on("shown.bs.modal", function () {
complexMap.fitBounds(bounds);
var currentCenter = complexMap.getCenter();
google.maps.event.trigger(complexMap, "resize");
complexMap.setCenter(currentCenter);
});
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;}
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);
}