Is it possible to open all info windows by default. I tried the following but it doesn't work:
var infowindow = new google.maps.InfoWindow({
maxWidth: 160
});
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter]
});
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
Your code only includes one infowindow, if you want them all to open, you need to create an infowindow for each marker.
Update: didn't notice when I wrote this that this question is tagged google-maps-api-2. This answer will only work for the Google Maps Javascript API v3, the deprecated Google Maps Javascript API v2, only supports a single infowindow at a time.
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter]
});
var infowindow = new google.maps.InfoWindow({
content: locations[i][0],
maxWidth: 160
});
infowindow.open(map, marker);
}
Related
How to show infowindow on page load in google maps. It should automatically show the infowindow pop up. I have multiple markers in the google map. I need all markers info window should open in page load.
js fiddle link
https://jsfiddle.net/vq7zfbgj/
code:
var locations = [
[
"Market 1",
22.809999,
86.179999,
5,
"Market1",
"Market1",
"Market1",
"found"
],
[
"Market 2",
22.801111,
86.171111,
5,
"Market2",
"Market2",
"Market2",
"found"
]
]
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(22.803444, 86.179525),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}
You can open multiple markers at once by initiating InfoWindow separately for each marker. I'd suggest removing the original var infowindow and doing the following within the for loop for each marker:
marker.infowindow = new google.maps.InfoWindow();
});
marker.infowindow.setContent(locations[i][0], locations[i][6]);
marker.infowindow.open(map, marker);
https://jsfiddle.net/vq7zfbgj/16/
I modified your fiddle to this and the infoWindow will open on page load. I add another marker just to ilustrate that could resolve more markers. Hope it helps.
for (i = 0; i < locations.length; i++) {
var infowindow = new google.maps.InfoWindow;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
I am creating markers for multiple points like this:
for (i = 0; i < locations.length; i++) {
console.log("Adding marker...");
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
draggable:true,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'dragend', function(){
console.log(marker.getPosition());
// This doesn't work :(
});
}
I then want to (with getPosition) access the positions (lat & long) of each marker when they are moved. How would I achieve that? There will most likely always be 2 markers on the map, so I would need to access marker 0 and marker 1 and log each of them when they are moved.
UPDATE 1:
I tried adding id: locations[i][0] to the marker and then accessing it with: console.log(marker.id); But that always returns the ID/name of the second marker, even if the first one is moved.
Use this inside the click listener to reference the marker thing that was clicked.
google.maps.event.addListener(marker, 'dragend', function(){
console.log(this.getPosition());
});
You store the markers into an array while creating them
var arr_marker=[];
for (i = 0; i < locations.length; i++) {
console.log("Adding marker...");
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
draggable:true,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'dragend', function(){
console.log(marker.getPosition());
// This doesn't work :(
});
arr_marker[] = marker;
}
I set my markers like this
var
marker,
i,
markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'img/markers/t1.png',
id: locations[i][3]
});
markers.push(marker);
marker.addListener('mouseover', function() {
marker.setIcon("img/serve-bracket.png");
});
}
This only seems to attach the event handler on the last one. How do I add it to all markers
You need to wrap your addListener in a closure.
var marker, i;
var markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'img/markers/t1.png',
id: locations[i][3]
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
marker.setIcon("img/serve-bracket.png");
}
})(marker, i));
markers.push(marker);
}
I am looking for help to get a custom marker. The code is currently broken. Here is my script. When I put icon in the for loop, it breaks. When I remove it, everything works.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(35.239313, -41.073296),
mapTypeId: google.maps.MapTypeId.HYBRID
});
map.setOptions({ minZoom: 3, maxZoom: 15 });
var infowindow = new google.maps.InfoWindow();
var image = 'images/research-pin.png';
var marker, i;
In this loop when I add "icon" to the for loop, it does not display. I need to display multiple markers all using the same custom image.
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
html: locations[0]
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
You are missing a comma. This:
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
html: locations[0] //<----- missing comma
icon: image
});
should be:
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
html: locations[0], // <---- added comma
icon: image
});
You should be getting a syntax error.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Google Maps - Multiple markers - 1 InfoWindow problem
I'm making a map where I plot some towns and places.
As you will see, when you click on a marker, you are redirected to the corresponding page. But now I would like to put the link and some other information in an info bubble popover. So, I've edit my code to this:
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5],});
marker[i] = marker;
google.maps.event.addListener(marker[i], 'click', function() {
infobulle.open(map, marker);
});
}
}
But as you can see here the info bubble stays "blocked" on the last location. I really don't know how to sort this.
I have the same result with this :
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4]});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
Last version :
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
processBeach(locations[i]);
}
}
function processBeach(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4]});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
You are using the marker variable for two different purposes it seems. One is as a single marker, and one as an array of markers. But you don't need an array of markers, if you use closures. Try this:
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
(function(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}(locations[i]));
}
}
By the way you also had a spurious comma at the end of the options array for google.maps.Marker which will cause problems in some browsers.
EDIT
If you don't want to use closures, this is equivalent:
function processBeach(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
processBeach(locations[i]);
}
}
Have a look at my jSFiddle here. The code you are missing is
On Click you need to fetch the current infoWindow from the map and then update it with new information
If you want to keep windows open and close when people want to close then you have to set a toggle kind of variable so each window will be created on click and then when someone click on close it will go away. But i think you only need to complete first part.
The code you should look in my fiddle is from line 120 to 150 which does check for infowindow if it exists and then do open the same window on new marker so it moves from old marker and go to new. if you keep creating new windows the old ones will not close magically.
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}}); // Get current info window
if (infowindow){ // if infoWindow is there then use it else create new
infowindow.open(map, marker);
infowindow.setContent(context.data.ht);
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data.ht}
}
});
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
}