Develop Reference

Info Windows are showing blank

I have this google map and everything works perfectly but the info windows are showing up as blank...
I've tried to use a for loop but I think I put it in the wrong place because the map just goes completely blank. I tried a foreach loop and the same thing happens. I also tried to move the infowindow variable inside the for each loop with no luck.
// Map variable
var map;
// Create and style the map
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(25.7819743, -80.2006986),
mapTypeId: 'roadmap',
styles: [{"featureType":"all","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"off"},{"color":"#ff0000"}]},{"featureType":"administrative.province","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"invert_lightness":!0},{"color":"#ffffff"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"lightness":"-46"},{"color":"#ffffff"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#d8a361"},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#c48c46"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#cf944b"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#cf944b"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#c48c46"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#c48c46"},{"lightness":"4"}]}]
}
);
// Custom Icons
var iconBase = 'img/';
var icons = {
main: {
icon: iconBase + 'map-icon.png'
}
};
// Icon Locations and infowindow content
var locations = [
{
position: new google.maps.LatLng(25.7819743, -80.2006986),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.6543563, -80.4034173),
type: 'main',
content: 'This is a another test'
}, {
position: new google.maps.LatLng(25.7589664, -80.4495347),
type: 'main',
content: 'This is a just another test'
}, {
position: new google.maps.LatLng(25.7905606, -80.3455961),
type: 'main',
content: 'This is yet another simple test'
}, {
position: new google.maps.LatLng(25.7611357, -80.3293175),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.8501614, -80.2520588),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.653536, -80.3311367),
type: 'main',
content: 'This is a simple test'
}
];
var infowindow = new google.maps.InfoWindow({
content: locations.content
});
// Show all markers
locations.forEach(function(location) {
var marker = new google.maps.Marker({
position: location.position,
icon: icons[location.type].icon,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
}

There is only one InfoWindow, but multiple markers, you need to set the content of the InfoWindow with the appropriate content for that marker. (also, locations.content is undefined, locations is an array of objects that have a .content property)
// Show all markers
locations.forEach(function(location) {
var marker = new google.maps.Marker({
position: location.position,
map: map
});
marker.addListener('click', function() {
infowindow.setContent(location.content)
infowindow.open(map, marker);
});
});
proof of concept fiddle
code snippet:
// Map variable
var map;
// Create and style the map
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(25.7819743, -80.2006986),
mapTypeId: 'roadmap',
});
// Icon Locations and infowindow content
var locations = [{
position: new google.maps.LatLng(25.7819743, -80.2006986),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.6543563, -80.4034173),
type: 'main',
content: 'This is a another test'
}, {
position: new google.maps.LatLng(25.7589664, -80.4495347),
type: 'main',
content: 'This is a just another test'
}, {
position: new google.maps.LatLng(25.7905606, -80.3455961),
type: 'main',
content: 'This is yet another simple test'
}, {
position: new google.maps.LatLng(25.7611357, -80.3293175),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.8501614, -80.2520588),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.653536, -80.3311367),
type: 'main',
content: 'This is a simple test'
}];
var infowindow = new google.maps.InfoWindow({
content: locations.content
});
// Show all markers
locations.forEach(function(location) {
var marker = new google.maps.Marker({
position: location.position,
map: map
});
marker.addListener('click', function() {
infowindow.setContent(location.content)
infowindow.open(map, marker);
});
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

Google map custom marker with pop-up (Info Windows) on click

I have customized Google Map with Custom Markers. I need to integrate Info Windows to each marker.
Custom Marker code from: https://developers.google.com/maps/documentation/javascript/custom-markers
Tried to integrate Info windows from: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
Here is a related question i found (but it is not exactly what i want): https://stackoverflow.com/a/3059129/6191987
My code below:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(40.712696, -74.005019),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [{
position: new google.maps.LatLng(40.712696, -74.005019),
type: 'parking'
}, {
position: new google.maps.LatLng(40.712753, -74.006081),
type: 'parking'
}, {
position: new google.maps.LatLng(40.713664, -74.007819),
type: 'library'
}];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">
</script>
Also added JSFiddle: https://jsfiddle.net/vishnuprasadps/7g33j2kz/

What do you want to put as content of your infoWindow ?
But this seems to do the trick :
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(40.712696, -74.005019),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [{
position: new google.maps.LatLng(40.712696, -74.005019),
type: 'parking'
}, {
position: new google.maps.LatLng(40.712753, -74.006081),
type: 'parking'
}, {
position: new google.maps.LatLng(40.713664, -74.007819),
type: 'library'
}];
var infowindow = new google.maps.InfoWindow({
content: "test"
});
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">
</script>
https://jsfiddle.net/uqLxnyca/
Have a good day.

multiple custom markers (icons) with different infowindows

I'm creating a map where I will be adding multiple custom markers, and I want each of them to have different infowindows.
The thing is that every marker has a different icon (those numbered dots you see in the image), and this is an example that is not explained on the GoogleMaps API code samples. I mean, they explain you how to create infowindows, but only in the case you are using the variable marker, and not for the variable icons. Therefore, I don't know where should I add the code for the infowindow. The website looks like this:
website screenshot
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
backgroundColor: '#000000',
center: new google.maps.LatLng(41.404998, 2.210517),
mapTypeId: 'roadmap',
streetViewControl: false,
});
var iconBase = 'images/numbers/';
var icons = {
001: {
icon: iconBase + '01.png'
},
002: {
icon: iconBase + '02.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002
//Barcelona 2
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
};
}
</script>

try using closure this way
var features = [
{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002
//Barcelona 2
}
];
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var infowindow = new google.maps.InfoWindow()
var content = "" + feature.type
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
you could change features this way
var features = [
{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001,
message: 'my firts message in info window'
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002,
message: 'my second message in info window'
//Barcelona 2
}
];
or you can add a new property
you should use
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var infowindow = new google.maps.InfoWindow()
var content = "" + feature.message
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));

Answering Josep last question if I may (I'm new in Stack Overflow so please forgive my imprecisions), I updated the fiddle http://jsfiddle.net/t7trcpv2/1/, adding to the 'feature' object a 'title' property where you can input your own data
var map;
var infowindow;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
backgroundColor: '#000000',
center: new google.maps.LatLng(41.404998, 2.210517),
mapTypeId: 'roadmap',
streetViewControl: false,
});
infowindow = new google.maps.InfoWindow();
var iconBase = 'images/numbers/';
var icons = {
001: {
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
},
002: {
icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map,
});
// must be a string (or a DOM node).
var content = "" + feature.title
google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
return function(evt) {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content, infowindow));
}
var features = [{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001,
title:'title1'
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002,
title: 'title2'
//Barcelona 2
}];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
};
}
google.maps.event.addDomListener(window, "load", initialize);

Google Maps API V3: Exclude single marker from clustering

I am using the google maps api and using grid clustering for the markers. I wanted to know if there is a way to exclude a single marker from clustering. I want a "You are here" marker that is always visible. I tried using a different array for just that marker and not including it the cluster function but that didn't work.
Does anyone have a solution for this?
Here is how i am doing the clustering
$(document).on('click', '#mapbut', function() {
var items, distances, you_are_here = [], markers_data = [], markers_data2 = [], fred, clust1, markss;
you_are_here.push({
lat : Geo.lat,
lng : Geo .lng,
animation: google.maps.Animation.DROP,
title : 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
infoWindow: {
content: '<p>You are Here</p>'
}
});
function loadResults (data) {
if (data.map.length > 0) {
items = data.map;
for (var i = 0; i < items.length; i++)
{
var item = items[i];
var distances = [];
var dist2;
if (item.Lat != undefined && item.Lng != undefined)
{
markers_data.push({
lat : item.Lat,
lng : item.Lng,
title : item.Site,
infoWindow: {
content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
}
});
}
}
}
map.addMarkers(markers_data);
map = new GMaps({
el: '#map',
lat: Geo.lat,
lng: Geo.lng,
zoom: 10,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
markerClusterer: function(map) {
options = {
gridSize: 50
}
clust1 = new MarkerClusterer(map,[], options);
return clust1;
},
scaleControl: true,
streetViewControl: false
});
map.addMarkers(you_are_here);

The GMaps clusters all the markers you add to it with the addMarker method (if you provide a MarkerClusterer).
One option: add your "special" marker (the one that you don't want clustered) to the map manually, so it isn't added to the MarkerClusterer:
The GMaps.map property is a reference to the Google Maps Javascript API v3 map object. So this will add a marker to the map without letting the GMaps library know about it:
you_are_here = new google.maps.Marker({
position: {lat: Geo.lat,lng: Geo.lng},
animation: google.maps.Animation.DROP,
title: 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
map: map.map
});
proof of concept fiddle
code snippet:
var Geo = {
lat: 40.7281575,
lng: -74.07764
};
$(document).on('click', '#mapbut', function() {
var items, distances, you_are_here = [],
markers_data = [],
markers_data2 = [],
fred, clust1, markss;
function loadResults(data) {
if (data.map.length > 0) {
items = data.map;
for (var i = 0; i < items.length; i++) {
var item = items[i];
var distances = [];
var dist2;
if (item.Lat != undefined && item.Lng != undefined) {
markers_data.push({
lat: item.Lat,
lng: item.Lng,
title: item.Site,
infoWindow: {
content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
}
});
}
}
}
map = new GMaps({
el: '#map',
lat: Geo.lat,
lng: Geo.lng,
zoom: 8,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
markerClusterer: function(map) {
options = {
gridSize: 50,
imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
}
clust1 = new MarkerClusterer(map, [], options);
return clust1;
},
scaleControl: true,
streetViewControl: false
});
map.addMarkers(markers_data);
you_are_here = new google.maps.Marker({
position: {
lat: Geo.lat,
lng: Geo.lng
},
animation: google.maps.Animation.DROP,
title: 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
infoWindow: {
content: '<p>You are Here</p>'
},
map: map.map
});
// map.addMarkers(you_are_here);
}
loadResults(data);
});
var data = {
map: [{
Lat: 40.7127837,
Lng: -74.005941,
Site: "New York, NY",
distance: 1
}, {
Site: "Newark, NJ",
Lat: 40.735657,
Lng: -74.1723667,
distance: 2
}]
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<input id="mapbut" type="button" value="map" />
<div id="map"></div>

To get around this is relatively simple, just after I send the markers array to MarkerClusterer I then add my location.
// Setup cluster markers
var markerCluster = new MarkerClusterer( gmap.map, options )
// add my location
gmap.addMarker({
lat: data.latitude,
lng: data.longitude
...
})
Thanks

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in {array}

This is the script I'm using.
<script>
var user_lat, user_lng;
var map;
var url = "./rest/network";
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 17,
lng: 80
},
zoom: 5
});
$.post(url,function(data,successStatus){
$.each(data, function(index, value) {
new google.maps.Marker({
position: value,
draggable: false,
map: map,
title: "cab"
});
});
});
}
</script>
The url returns [{lat:12.74711089,lng:79.98483278},{lat:18.0,lng:80.0},{lat:19.0,lng:78.0}]
Again when I use this code its working
<script>
var user_lat, user_lng;
var map;
var url = "./rest/network";
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 17,
lng: 80
},
zoom: 5
});
var data = [{lat:12.74711089,lng:79.98483278},
{lat:18.0,lng:80.0},
{lat:19.0,lng:78.0}];
$.each(data, function(index, value) {
new google.maps.Marker({
position: value,
draggable: false,
map: map,
title: "cab"
});
});
}
</script>
If the array format is the problem, then the second code also shouldn't work. But it is working. I'm not knowing the reason behind the problem. Is there any problem with the ajax call?