Develop Reference

how to show info window in google map without click event

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

Open URL's from infowindows in Lightbox or similar

I have progressed in my project using Google Maps to plot a planned holiday.
The current version is
here
function initGmap() {
var map;
var clicked = false
var locations = [
['Sydney', -33.8688197, 151.2092955, 1,'https://en.wikipedia.org/wiki/Sydney'],
['Vancouver', 49.2827291, -123.1207375, 2,'https://en.wikipedia.org/wiki/Vancouver'],
['Vancouver', 49.2827291, -123.1207375, 3,'https://en.wikipedia.org/wiki/Vancouver'],
['Kamloops', 50.6745220, -120.3272674, 4,'https://en.wikipedia.org/wiki/Kamloops'],
['Jasper,Canada', 52.8736786, -118.0813581, 5,'https://en.wikipedia.org/wiki/Jasper,Canada'],
['Banff', 51.1783629, -115.5707694, 6,'https://en.wikipedia.org/wiki/Banff'],
['Lake Louise,Canada', 51.4253705, -116.1772552, 7,'https://en.wikipedia.org/wiki/Lake Louise,Canada'],
['Calgary', 51.0486151, -114.0708459, 8,'https://en.wikipedia.org/wiki/Calgary'],
['Canadian Rockies', 54.1521752, -120.1585339, 9,'https://en.wikipedia.org/wiki/Canadian Rockies'],
['Niagara Falls', 43.0962143, -79.0377388, 10,'https://en.wikipedia.org/wiki/Niagara Falls'],
['New York', 40.7127837, -74.0059413, 11,'https://en.wikipedia.org/wiki/New York'],
['Rockerfeller Building', 40.7587402, -73.9786736, 12,'https://en.wikipedia.org/wiki/Rockerfeller Building'],
['Statue Of Liberty', 40.6892494, -74.0445004, 13,'https://en.wikipedia.org/wiki/Statue Of Liberty'],
['Empire State Building', 40.7484405, -73.9856644, 14,'https://en.wikipedia.org/wiki/Empire State Building'],
['Washington D.C.', 38.9071923, -77.0368707, 15,'https://en.wikipedia.org/wiki/Washington D.C.'],
['Utah', 39.3209801, -111.0937311, 16,'https://en.wikipedia.org/wiki/Utah'],
['Arches National Park', 38.7330810, -109.5925139, 17,'https://en.wikipedia.org/wiki/Arches National Park'],
['Las Vegas', 36.1699412, -115.1398296, 18,'https://en.wikipedia.org/wiki/Las Vegas'],
['Bryce National Park', 37.5930377, -112.1870895, 19,'https://en.wikipedia.org/wiki/Bryce National Park'],
['Zion national Park', 37.2982022, -113.0263005, 20,'https://en.wikipedia.org/wiki/Zion national Park'],
['San Francisco', 37.7749295, -122.4194155, 21,'https://en.wikipedia.org/wiki/San Francisco'],
['Alcatraz', 37.8269775, -122.4229555, 22,'https://en.wikipedia.org/wiki/Alcatraz'],
['Yosemite', 37.8651011, -119.5383294, 23,'https://en.wikipedia.org/wiki/Yosemite'],
['San Francisco', 37.7749295, -122.4194155, 24,'https://en.wikipedia.org/wiki/San Francisco'],
['Sydney', -33.8688197, 151.2092955, 25,'https://en.wikipedia.org/wiki/Sydney'],
];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: new google.maps.LatLng(-33.8688197, 151.2092955),
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]),
title: locations[i][0],
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
clicked = true;
var html = '';
// Create a container for the infowindow content
html += '<div class="infowindow-content">';
// Add a link
html += 'Click for local Wiki page<br />';
html += '<locations[i][4]>' + locations[i][0] + '<br> <br>';
html+= 'Bookings<br />';
// Add an image
html += '<locations[i][5]>' + locations[i][5] + '<br>';
// Close the container
html += '</div>';
infowindow.setContent(html);
infowindow.open(map, marker);
setTimeout(function () {infowindow.close(); }, 8000);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseover', function() { if (!clicked) {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
});
google.maps.event.addListener(marker, 'mouseout', function() {
if (!clicked) {
infowindow.close();
}
});
var lineCoordinates = locations.map(function(val) {
return new google.maps.LatLng(val[1], val[2]);
});
var tripPath = new google.maps.Polyline({
path: lineCoordinates,
geodesic: true,
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 2
});
tripPath.setMap(map);
}
}
initGmap();
initialize()
The issue is .. from the selected marker, pages open up in full screen.. and when I cancel out I am taken back to the first marker.
I think if I open the links in lightbox (or similar) I can just close the lightbox window..?
(Am I right ?)
So how would I add Lightbox and open the infowindow links I have in Lightbox(or similar) ?
All help or suggestions appreciated...
Cheers

Clicking same Marker twice opens two InfoWindows

I got infowindows working, but for some reason if I click the same marker multiple clicks it opens multiple of the same infowindow. I have a feeling it has to be something with my code, but I cant quite put my finger on what it is. Any help is appreciated.
var map;
var markers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(33.6894120, -117.9872660),
mapTypeId: 'roadmap',
disableDefaultUI: true
});
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map,
type: feature.type,
title: feature.title,
description: feature.description
});
marker.addListener('click', function() {
map.setCenter(marker.getPosition());
var infoWindow = new google.maps.InfoWindow({
map: map,
pixelOffset: new google.maps.Size(0, -60)
});
infoWindow.setContent(marker.description);
infoWindow.setPosition(marker.position);
google.maps.event.addListener(map, 'drag', function() {
infoWindow.close();
});
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
});
markers.push(marker);
}
filterMarkers = function(getType) {
//console.log(getType);
for (var i = 0; i < markers.length; i++) {
if (markers[i].type == getType || getType == "") {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
}
var features = [
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'type1',
description: 'Description1'
},{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'type2',
description: 'Description2'
},{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'type3',
description: 'Description3'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
$(document).ready(function(){
initMap();
});

If you don't want an infowindow created every time you click on the marker, don't create a new one every time you click on the marker, create one for the marker (or one for the map, if you only ever want one open), and open it in the click listener.
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
map: map,
type: feature.type,
description: feature.description
});
// create infowindow for the marker
var infoWindow = new google.maps.InfoWindow({});
marker.addListener('click', function() {
map.setCenter(marker.getPosition());
// set the content of the infowindow
infoWindow.setContent(marker.description);
// open the infowindow on the marker.
infoWindow.open(map,marker);
});
markers.push(marker);
}
proof of concept fiddle

You are creating a new InfoWindow with every marker click:
marker.addListener('click' ...
var infoWindow = *new google.maps.InfoWindow( ...*
It is expected that you get multiple instances.
If you want one InfoWindow for all markers you can follow this example
If you want to have one per each marker check out this SO answer.

Is it possible for me to change a map marker icon when the specific icon is clicked and then to toggle when another one is clicked and so on?

Theses are my marker coordinates.
var markers = [
{
"title": 'Burrel',
"lat": '41.6065764',
"lng": '20.0130826',
},
{
"title": 'Grabian',
"lat": '40.9501',
"lng": '19.583533'
},
{
"title": 'Spac',
"lat": '41.899017',
"lng": '20.0456071'
}
];
and below is my code that does a loop through them all and creates markers on the map as well as adding a click event listener
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: 'images/marker.png'
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
var x = document.getElementsByClassName("displayblock")[0];
x.style.zIndex=0;
x.className = "w-clearfix slide";
var d = document.getElementById(this.title);
d.className = "w-clearfix slide displayblock";
d.style.zIndex=1;
});
})(marker, data);
}
The original markers that are generated in the loop have an image marker 'images/marker.png' i want to replace this with 'images/marker2.png' when clicked and have them toggled.. a nudge in the right direction would be greatly appreciated..

setIcon will work to toggle markers, but the complexity is in adding the event listener and in clearing the non-selected icons in a clean way. In your loop you can add the event listener directly to the marker:
marker.addListener('click', function() {
this.setIcon(selectedSymbol);
});
and you can manage all the markers by adding to an array similar to #tkdave's suggestion:
var markers = [];
function clearSelectedMarker() {
markers.forEach(function(marker) {
marker.setIcon(image);
});
}
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
marker.addListener('click', function() {
clearSelectedMarker();
this.setIcon(selectedSymbol);
});
markers.push(marker);
}
To me this is also more readable.
https://jsfiddle.net/fpgya6Lq/1/

Try changing the marker icon in the click handler. You just need to keep track of the currently selected marker and reset the others.
marker.setIcon( otherIcon );
https://developers.google.com/maps/documentation/javascript/reference#Marker

Change Google Maps marker icon when clicking on other

I have created a Google Maps Multiple locations page,
using Advanced Custom Fields Google Map field.
I have managed to make the marker icon change when clicked on, but I want it to be changed back when clicking on other icons.
here is an example of the code:
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: iconBase + 'Stock%20Index%20Up.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
}
})(marker, i));
Better look of the working code here:
http://jsfiddle.net/gargiguy/s8vgxp3g

What duncan said: What you want to do is add all your markers to an array. In your click event handler, loop over that array, updating each marker's icon. Then finally set the icon for just the marker that's been clicked.
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
for (var j = 0; j < markers.length; j++) {
markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
}
marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
};
working fiddle
working code snippet:
var markers = [];
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
// center: new google.maps.LatLng(-33.92, 151.25),
center: new google.maps.LatLng(36.8857, -76.2599),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/';
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,
icon: iconBase + 'Stock%20Index%20Up.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
for (var j = 0; j < markers.length; j++) {
markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
}
marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
};
})(marker, i));
markers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
var locations = [
[
"New Mermaid",
36.9079, -76.199,
1,
"Georgia Mason",
"",
"Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
"coming soon"
],
[
"1950 Fish Dish",
36.87224, -76.29518,
2,
"Terry Cox-Joseph",
"Rowena's",
"758 W. 22nd Street in front of Rowena's",
"found"
],
[
"A Rising Community",
36.95298, -76.25158,
3,
"Steven F. Morris",
"Judy Boone Realty",
"Norfolk City Library - Pretlow Branch, 9640 Granby St.",
"found"
],
[
"A School Of Fish",
36.88909, -76.26055,
4,
"Steven F. Morris",
"Sandfiddler Pawn Shop",
"5429 Tidewater Dr.",
"found"
],
[
"Aubrica the Mermaid (nee: Aubry Alexis)",
36.8618, -76.203,
5,
"Myke Irving/ Georgia Mason",
"USAVE Auto Rental",
"Virginia Auto Rental on Virginia Beach Blvd",
"found"
]
];
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div>
<div id="map" style="width: 500px; height: 400px;"></div>
</div>

Since it sounds like you only need to change the previous icon back to the original, I wouldn't recommend looping through every marker. In a map with a lot of markers, this could become quite heavy.
Instead, I would store the active marker in a variable on the click event, and just update that one when it changes.
var marker;
var activeMarker;
var iconDefault = iconBase + 'Stock%20Index%20Up.png';
var iconSelected = 'https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png';
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: iconDefault
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
// check to see if activeMarker is set
// if so, set the icon back to the default
activeMarker && activeMarker.setIcon(iconDefault);
// set the icon for the clicked marker
marker.setIcon(iconSelected);
// update the value of activeMarker
activeMarker = marker;
}
})(marker, i));
}

You can do same like below:
var prevMarker = "";
var markers = [];
var image = { url: "your_png.png",
scaledSize: new google.maps.Size(38, 40) // If you want to resize it.
};
For creating marker,
var marker = createMarker(coordinate, map, image, id);
// coordinate = {lat:float value,long:float value} and 'map' your map
function createMarker(lat, long, map, image, marker_id) {
var coordinates = {lat: lat, lng: long};
var marker = new google.maps.Marker({
position: coordinates,
icon: image,
id: "marker_" + marker_id,
map: map
});
return marker;
}
For marker action you can use.
marker.addListener('click', function() {
console.log(this.id);
if(prevMarker !== "") {
prevMarker.setIcon({
url: "your_image.png",
scaledSize: new google.maps.Size(38, 40)
});
}
prevMarker = this;
this.setIcon({
url: "your_image.png",
scaledSize: new google.maps.Size(48, 50)
});
map.panTo(this.getPosition());
});
loop marker code for all markers available.