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>
Related
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.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
i have wrote a script to display multiple map markers with search via zip code, or address also to display the distance between the multiple markers and the given location from user but.. i want to display infoWindow with some content that i will write to each one of the markers...Can anyone help me??
The script goes like this :
var features = [
{
position: new google.maps.LatLng(38.089374, 23.809245),
type: 'info'
}, {
position: new google.maps.LatLng(37.865212, 23.744748),
type: 'info'
}, {
position: new google.maps.LatLng(37.997172, 23.693429),
type: 'info'
}, {
position: new google.maps.LatLng(37.934769, 23.879542),
type: 'info'
}, {
position: new google.maps.LatLng(38.003720, 23.886767),
type: 'info'
}, {
position: new google.maps.LatLng(38.027083, 23.850951),
type: 'info'
}, {
position: new google.maps.LatLng(37.944077, 23.661457),
type: 'info'
}, {
position: new google.maps.LatLng(38.017348, 23.796585),
type: 'info'
}, {
position: new google.maps.LatLng(37.955754, 23.677229),
type: 'info'
}, {
position: new google.maps.LatLng(37.971261, 23.756350),
type: 'info'
}, {
position: new google.maps.LatLng(37.990022, 23.720621),
type: 'info'
}, {
position: new google.maps.LatLng(38.050031, 23.752440),
type: 'info'
}, {
position: new google.maps.LatLng(38.464754,23.615317),
type: 'info'
}, {
position: new google.maps.LatLng(37.943692, 23.748214),
type: 'info'
}, {
position: new google.maps.LatLng(39.544696, 21.775843),
type: 'info'
}, {
position: new google.maps.LatLng(40.668344, 22.889161),
type: 'info'
}, {
position: new google.maps.LatLng(40.662039, 22.911951),
type: 'info'
}, {
position: new google.maps.LatLng(40.573629, 23.025070),
type: 'info'
}, {
position: new google.maps.LatLng(40.303271, 21.804128),
type: 'info'
}
];
// edw oi kaloi oi markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
Do something like this! I am not an expert though as per your question I am sharing the way I think I would have done it.
Please note I haven't tested the code so please do check and if there is any problem let me know.
var markers = [
{
lat: 38.089374,
lng: 23.809245,
type: 'info'
}, {
lat: 40.668344,
lng: 22.889161,
type: 'info'
}, {
lat: 40.573629,
lng: 21.804128,
type: 'info'
}];
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false,
fullscreenControl: false,
streetViewControl: false,
zoomControl: true,
};
var mapDiv = document.getElementById('mapdiv');
var map = new google.maps.Map(mapDiv, mapOptions);
var location;
if( markers.length > 0 ){
for( var i=0; i<markers.length; i++ ){
location = new google.maps.LatLng( markers[i].lat, markers[i].lng
);
bounds.extend( location );
var marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP,
});
var content = '<div class="someclass">Your content goes here.</div>';
var infowindow = new google.maps.InfoWindow({maxWidth:350});
google.maps.event.addListener(marker, 'mouseover' ,(function(marker,content,infowindow) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
};
}) (marker,content,infowindow));
}
}
And finally, if it helps you to solve your problem don't forget to accept it.
I am trying to get a Google Maps instance with a marker in a pop-up window in Webix but I am getting initMap is not a function error. There is a direct way of initializing Google Maps in Webix but this time marker object isn't recognized. Here is my code:
$$("showMapButton").attachEvent("onItemClick", function (id, e) {
if (!$$("mapwin"))
webix.ui({
view: "window",
adjust: true,
id: "mapwin",
position: "center",
move: true,
width: 600,
height: 600,
//top: 100, left: 50,
position: "center",
head: {
view: "toolbar",
elements: [
{ view: "label", label: "OpenStreet Map", align: 'left' },
{
view: 'button', label: 'Close', width: 70, click: function () {
$$("mapwin").hide();
}
}
]
},
body: {
width: 300,
height: 300,
template: "<div id='mapBody'> </div>"
},
});
// google.maps.event.addDomListener(window, "load", initMap);
function initMap() {
var uluru = { lat: 32, lng: 32 };
var map = new google.maps.Map(document.getElementById('mapBody'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
$$("mapwin").show();
});
I could sure use some help... Thanks in advance!
$$("showMapButton").attachEvent("onItemClick", function (id, e) {
//create a window if it is does not exist
if (!$$("mapwin"))
webix.ui({
view: "window",
id: "mapwin",
position: "center",
move: true,
width: 600,
height: 600,
head: {
view: "toolbar",
elements: [
{
id:"mapClose", view: 'button', label: 'Close', width: 120, click: function () {
//hide windows (.close() will destroy)
$$("map").getMap(true).then(function (map) {
marker.setMap(null);
map.setOptions({ styles: [] });
});
$$("mapwin").hide();
}
},
{
align:"right", id:"setStyleButton", view: 'button', label: 'Koyu Tema', width: 120, click: function () {
$$("map").getMap(true).then(function (map) {
});
}
}
]
},
body: {
view: "google-map",
id: "map",
key: "AIzaSyBzviXHLV5cRdCOatv5oBatf5EGJ019npQ",
zoom: 9
},
});
$$("map").getMap(true).then(function (map) {
var myLatlng = new google.maps.LatLng(latitude, longtitude);
map.setCenter(myLatlng);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
//icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + myLatlng.lat() +
'<br>Longitude: ' + myLatlng.lng()
});
var str = 'Araç: ' + myLatlng.lat() + '<br>Enlem: ' + myLatlng.lat() + '<br>Boylam: ' + myLatlng.lng() + '<br>Konum: ' + location;
infowindow.setContent(str);
marker.addListener('click', function () {
infowindow.open(map, marker);
});
// infowindow.open(map, marker);
});
$$("mapwin").show();
});
All right then it is just a matter of promise function. First you should fetch the map object and after that with 'then' function you can play with it. In case anyone needs google-map with webix i write the code here.
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);
This is what I have so far.
function init_map() {
var places = [
{ name: "Place 1", coords: new google.maps.LatLng(30.728752, -73.995525)},
{ name: "Place 2", coords: new google.maps.LatLng(30.733673, -73.990028)},
{ name: "Place 3", coords: new google.maps.LatLng(40.725778, -73.992249)}
]
var myOptions = {
zoom: 14,
center: places[0].coords,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for ( var x=0; x < places.length; x++ ){
var place = places[x];
var marker = new google.maps.Marker({
position: place.coords,
title: place.name,
icon: icon,
clickable: true,
infowindow: new google.maps.InfoWindow({content:"hello world"})
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
marker.infowindow.open(map, marker);
console.log(marker);
});
}
};
I'd like to have the default InfoWindow which you'd see when searching for an address on Google Maps appear instead of my own custom window. How is this possible?
What do you mean by its default Google content?
Also it might be better for you to create just 1 infowindow object and then share it amongst your markers.