This question already has answers here:
close InfoWindow before open another
(3 answers)
Closed 8 years ago.
function showpopup(lat, lng, info)
{
// Create infoWindow
var infoWindow = new google.maps.InfoWindow({
content: info
});
// Create marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: 'Lima',
map: map.map,
infoWindow: infoWindow
});
// This opens the infoWindow
infoWindow.open(map, marker);
}
I have this function which is take three parameter and create the info window at the Map but now i want when user open second info window the first one close using javascript and Gmap V3
You can have a global variable to keep track of the infowindow and close it before opening new one using the close() method, something like
var infoWindow; //global tracker
function showpopup(lat, lng, info)
{
//close info window in it exists
if(infoWindow)
infoWindow.close();
// Create new infoWindow
infoWindow = new google.maps.InfoWindow({
content: info
});
// Create marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: 'Lima',
map: map.map,
infoWindow: infoWindow
});
// This opens the infoWindow
infoWindow.open(map, marker);
}
If there are more then one info windows, you can have an array, loop through them and call the close() method on each item..
try this code..
var infowindows = new Array();
var popup = new google.maps.InfoWindow({
// size: new google.maps.Size(420,130),
content:content_info
});
infowindows.push(popup); //push all infoboxes to an array
google.maps.event.addListener(marker, 'click', function() {
close_popups(); //close any infobox open
map.panTo(mycenter1);
popup.open(map, marker); //opens current marker's infowindow
// currentPopup = null;
});
function close_popups(){
for(var i = 0; i<infowindows.length; i++){
infowindows[i].close();
}
}
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 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);
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;}
aI know that this one is repeated question,
I am using google map v3 on my Django web based applicaiton. Where i am using Markers, Infowindow and polyline. Everything works fine, except the one when i click on a marker to show the content by Info window, the previous opened info window didn't closed.
I am posting the my map code(only the script part or which are the useful):
var marker = add_marker(flightPlanCoordinates[i][0], flightPlanCoordinates[i][1],"Event Detail",myHtml);
Here myHtml is a variable which contains the Info window content. I didn't define the variable here. SO ignore it.
marker.setMap(map);
}
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinatesSet,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
return marker;
}
Instead of multiple infoWindows use only one instance.
When clicking on a marker, first close the infoWindow, then set the new content and open the infoWindow.
function add_marker(lat,lng,title,box_html)
{
//create the global instance of infoWindow
if(!window.infowindow)
{
window.infowindow=new google.maps.InfoWindow();
}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(box_html);
infowindow.open(map,this)
});
return marker;
}
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);
});