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);
Related
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>
How to realize clustering of markers on the map? Help me clear errors. necessary scripts are connected. Error: enter image description here
function CustomMarker(latlng, map, imageSrc) {
this.latlng_ = latlng;
this.imageSrc = imageSrc;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
...
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 17,
center: new google.maps.LatLng(48.42216, 44.31308),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var data = [{
profileImage: "./images/1.jpg",
pos: [48.42217, 44.31308]
}, {
profileImage: "./images/2.jpg",
pos: [48.42220, 44.31308]
}];
for(var i=0;i<data.length;i++){
new CustomMarker(new google.maps.LatLng(data[i].pos[0],data[i].pos[1]), map, data[i].profileImage)
}
var markerCluster = new MarkerClusterer(map, data,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
Please find this code snippet might help your cause.
function initialize(markers) {
map = new google.maps.Map(document.getElementById('main-map'), {
zoom:3,
center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
for (var i = 0; i < markers.length; i++) {
var image = '/Festool/media/Festool%20Images/Festool%20Icons/location-icon.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i].Latitude, markers[i].Longitude),
map: map,
icon:image,
title: 'Click to zoom'
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 250,
});
mar.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent( ContentString(i));
infowindow.open(map, marker);
}
})(marker, i));
}
}
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.
I'm using the google maps API V3 in javascript and Vue.js for my application and i have found a strange bug, when i click the first time to put a marker on the map, the web app froze during 1-3seconds. Here is my code:
var vueMap = new Vue({
el: '#map-canvas',
data: {
infowindow: new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
}),
marker: null
},
ready:function(){
this.initialize();
},
methods: {
createMarker: function (latlng, name, html, point1, map) {
var distanceKm = google.maps.geometry.spherical.computeDistanceBetween(point1, latlng);
distanceKm = distanceKm/1000;
distanceKm = distanceKm.toFixed(2);
var contentString = "Distance en KM ---- " + distanceKm + '<br/>Score de 123';
// HERE IS WHERE THE FROZE HAPPEN
this.marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
// TODO onclick
google.maps.event.addListener(this.marker, 'click', function() {
this.infowindow.setContent(contentString);
this.infowindow.open(map,this.marker);
}.bind(this));
google.maps.event.trigger(this.marker, 'click');
return this.marker;
},
initialize: function () {
var styles = [/*some style*/];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(48.815145,2.244830),
new google.maps.LatLng(48.902137, 2.417864)
);
var point1 = new google.maps.LatLng(48.858230, 2.372566);
var center = bounds.getCenter();
var x = bounds.contains(center);
var mapOptions = {
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
},
center: center,
zoom: 1,
minZoom: 13,
streetViewControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
};
console.log(document.getElementById('map-canvas'));
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var lastValidCenter = map.getCenter();
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
google.maps.event.addListener(map, 'center_changed', function() {
if (bounds.contains(map.getCenter())) {
// still within valid bounds, so save the last valid position
lastValidCenter = map.getCenter();
return;
}
// not valid anymore => return to last valid position
map.panTo(lastValidCenter);
});
google.maps.event.addListener(map, 'click', function(event) {
//call function to create marker
if (this.marker != null) {
this.marker.setMap(null);
this.marker = null;
}
this.marker = vueMap.createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng, point1, map);
}.bind(this));
}
}
});
module.exports = vueMap;
It's longer on Chrome than with Firefox and Safari...
Does someone knows why ? (Or have a clue about it ?)
Thanks in advance
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.