Multiple markers in google maps, multiple maps - javascript

I'm trying to built 2 google maps in a same page. One of those maps has several markers...
function initializeMap() {
var locations = [
['PARIS - FRANCE', 485.810,2.2629],
['PARIS - FRANCE', 49.046,2.330],
['PARIS - FRANCE', 48.4331,2.2134],
['PALERMO - ITALY', 38.1033,1.3527],
['ROME - ITALY', 41.4846,1.21511]
];
var lat = '48.900401';
var lon = '2.231761';
var contentString = '<p style="color:#8fd522; font-weight: bold;">XXX</p>';
var centerLon = lon - 0.0105;
var myOptions = {
scrollwheel: false,
draggable: false,
disableDefaultUI: true,
center: new google.maps.LatLng(lat, centerLon),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Bind map to elemet with id map-canvas
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lon),
title: 'XXX'
});
var infowindowW = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function () {
infowindowW.open(map, marker);
});
infowindowW.open(map, marker);
var myOptions = {
scrollwheel: true,
draggable: true,
disableDefaultUI: false,
center: new google.maps.LatLng(66.6846, -67.21511),
zoom: 2.82,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById('map-canvas-net'), myOptions);
var i;
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map2,
title: locations[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: locations[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map2, marker);
}
})(marker, i));
}
}
The markers of map2 are not clickable...I tried to do marker[i] in the loop but it just make the code invalid (window.initializeMap is not a function)
Any idea?

Zoom is an integer. For some reason, this:
zoom: 2.82,
causes the problem. Change that to 2 and it works.
code snippet:
function initializeMap() {
var locations = [
['PARIS - FRANCE', 48.810, 2.2629],
['PARIS - FRANCE', 49.046, 2.330],
['PARIS - FRANCE', 48.4331, 2.2134],
['PALERMO - ITALY', 38.1033, 1.3527],
['ROME - ITALY', 41.4846, 1.21511]
];
var lat = '48.900401';
var lon = '2.231761';
var contentString = '<p style="color:#8fd522; font-weight: bold;">XXX</p>';
var centerLon = lon - 0.0105;
var myOptions = {
scrollwheel: false,
draggable: false,
disableDefaultUI: true,
center: new google.maps.LatLng(lat, centerLon),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Bind map to elemet with id map-canvas
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lon),
title: 'XXX'
});
var infowindowW = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindowW.open(map, marker);
});
infowindowW.open(map, marker);
var myOptions2 = {
scrollwheel: true,
draggable: true,
disableDefaultUI: false,
center: new google.maps.LatLng(66.6846, -67.21511),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById('map-canvas-net'), myOptions2);
var i;
for (i = 0; i < locations.length; i++) {
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map2,
title: locations[i][0]
});
var infowindow2 = new google.maps.InfoWindow({
content: locations[i][0]
});
google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
return function() {
infowindow2.setContent(locations[i][0]);
infowindow2.open(map2, marker2);
};
})(marker2, i));
}
}
google.maps.event.addDomListener(window, 'load', initializeMap);
html,
body,
#map-canvas,
#map-canvas-net {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry,places&ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="map-canvas-net" style="border: 2px solid #3872ac;"></div>

Related

Unable to show 2 markers in google map only showing single marker

I want to show 2 markers in google map but only 1 marker is populating in the map another is not populating. how to show 2 markers in the map , I think I have missed the variable name changing for the second marker but not able to find where I did mistake.
code
function initMap() {
var myLatLng = new google.maps.LatLng(22.803702, 86.189567),
myOptions = {
zoom: 14,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "1",
});
var contentString = 'marker 1';
var myLatLng2 = new google.maps.LatLng(22.111111, 86.189687),
myOptions = {
zoom: 14,
center: myLatLng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker1 = new google.maps.Marker({
position: myLatLng2,
map: map,
icon:'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "2",
});
var contentString2 = 'marker 2';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
marker.addListener('click', function () {
infowindow.open(map, marker1);
});
marker.setMap(map);
marker1.setMap(map);
}
You are creating a new map after you add the first marker to it.
var myLatLng = new google.maps.LatLng(22.803702, 86.189567),
myOptions = {
zoom: 14,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
// first map instantiation <================================================== ***
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "1",
});
var contentString = 'marker 1';
var myLatLng2 = new google.maps.LatLng(22.111111, 86.189687),
myOptions = {
zoom: 14,
center: myLatLng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
// second map instantiation <================= remove this ==================== ***
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
Remove that code.
proof of concept fiddle
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
<script type="text/javascript">
function initMap() {
var myLatLng = new google.maps.LatLng(22.803702, 86.189567),
myOptions = {
zoom: 7,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "1",
});
var contentString = 'marker 1';
var myLatLng2 = new google.maps.LatLng(22.111111, 86.189687),
marker1 = new google.maps.Marker({
position: myLatLng2,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "2",
});
var contentString2 = 'marker 2';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.addListener('click', function() {
infowindow.open(map, marker1);
});
marker.setMap(map);
marker1.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<div id="map-canvas"></div>

Adding labels and icons on google maps markers

How can I add labels to my two markers so that when you click on the marker it shows you more details about it and also how can I change the icon of the "Access Point 2" to a different marker
function initialize() {
var myLatlng = new google.maps.LatLng(-26.322402,31.142249),
map = new google.maps.Map(document.getElementById('google-map-default'), {
zoom: 14,
center: myLatlng
}),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924),
marker1 = new google.maps.Marker({
position: accessPoint1,
map: map,
title: "Access Point 1"
});
var accessPoint2 = new google.maps.LatLng(-26.316700,31.138043),
marker2 = new google.maps.Marker({
position: accessPoint2,
map: map,
title: "Access Point 2"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#google-map-default {
height: 200px;
}
<div id="google-map-default"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
the code above is in a file called maps.mini.js which is currently working fine. I just need to make modifications on it as specified above
Here is a probably more robust and extendable solution that makes use of an array holding your locations (markers), and a single InfoWindow object. With this, you can add as many locations as you need without having to duplicate the rest of the code...
function initialize() {
var myLatlng = new google.maps.LatLng(-26.322402, 31.142249);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: myLatlng
});
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
var locations = [
[new google.maps.LatLng(-26.315402, 31.123924), 'Access Point 1', 'Custom text 1'],
[new google.maps.LatLng(-26.316700, 31.138043), 'Access Point 2', 'Custom text 2']
];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i][0],
map: map,
title: locations[i][1]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas {
height: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
For your marker1 you can
var my_contentString1 = 'my text content 1... ' ;
var my_infowindow1 = new google.maps.InfoWindow({
content: my_contentString1
});
var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924),
marker1 = new google.maps.Marker({
position: accessPoint1,
map: map,
title: "Access Point 1"
});
marker1.addListener('click', function() {
my_infowindow1.open(map, marker);
});
do the same for marker2
I ended up doing it this way which worked so well for me
<script type="text/javascript">
var locations = [
['ap7', -26.303139, 31.093508, 7],
['ap6', -26.322402, 31.142249, 6],
['ap5', -26.316700, 31.138043, 5],
['ap4', -26.315402, 31.123924, 4],
['ap3', -26.329244, 31.150478, 3],
['ap2', -26.309525, 31.134632, 2],
['ap1', -26.289923, 31.140195, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(-26.309525, 31.134632),
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]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>

Google Maps add new marker and pop up title

Sorry if this is a real rookie question but I can never get my head around Google Maps API.
Below is my JS code for my google map. I just want to simply add another marker and make the title pop up when you click on the marker. Can someone show me how this is done?
// Init Google Maps
function initGoogleMaps() {
// Init on contact page
if ($('#contact-map').length > 0) {
var myLatlng = new google.maps.LatLng(50.373667, -4.138203),
mapOptions = {
center: myLatlng,
zoom: 10,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
mapTypeId: google.maps.MapTypeId.MAP,
scrollwheel: false
// disableDefaultUI: true
},
map = new google.maps.Map(document.getElementById("contact-map"), mapOptions),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us"
});
}
}
initGoogleMaps();
add an infowindow
infowindow = new google.maps.InfoWindow(),
add a "click" listener to the marker to open it:
google.maps.event.addListener(marker,'click',function(e) {
infowindow.setContent(marker.getTitle());
infowindow.open(map,marker);
});
add a second marker and click listener for it:
marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us here also"
})
google.maps.event.addListener(marker2,'click',function(e) {
infowindow.setContent(marker2.getTitle());
infowindow.open(map,marker2);
});
proof of concept fiddle
code snippet:
// Init Google Maps
function initGoogleMaps() {
// Init on contact page
if ($('#contact-map').length > 0) {
var myLatlng = new google.maps.LatLng(50.373667, -4.138203),
myLatlng2 = new google.maps.LatLng(50.37, -4.2)
mapOptions = {
center: myLatlng,
zoom: 10,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
mapTypeId: google.maps.MapTypeId.MAP,
scrollwheel: false
// disableDefaultUI: true
},
map = new google.maps.Map(document.getElementById("contact-map"), mapOptions),
infowindow = new google.maps.InfoWindow(),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us"
}),
marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us here also"
})
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.setContent(marker.getTitle());
infowindow.open(map, marker);
});
google.maps.event.addListener(marker2, 'click', function(e) {
infowindow.setContent(marker2.getTitle());
infowindow.open(map, marker2);
});
}
}
initGoogleMaps();
html,
body,
#contact-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>
<div id="contact-map" style="border: 2px solid #3872ac;"></div>
try this:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString = 'html string';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}

google map api V3 markers

I am having a problem with google maps, I cant put markers on some location. My idea was to find my location and to put marker on it, then to put markers on other locations but the markers on other locations are not showing on a map.
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
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]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
The main problem with your function is that your marker adding loop is outside success function, so it never gets called. You also had an extra }at the end of your code. Here is a full solution jsfiddle
var map;
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
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]);
infowindow.open(map, marker);
}
})(marker, i));
}
} //success fn ENDS
var position = {
coords: {
latitude: 44.766666699999990000,
longitude: 17.183333299999960000
}
};
success(position);
the main problem with your code is you are plotting the marker before the map is loaded because it is out side of your function success.try this:I have use static value for center you can change it as per your code.
$(document).ready(function () {
success(position);
});
var position = { // suppose this is your position
coords: {
latitude: 44.666666699999990000,
longitude: 17.183333299999960000
}
};
var map;
var marker, i;
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
document.getElementById('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 8,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcontainer"), options);
marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
var infowindow = new google.maps.InfoWindow();
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) {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
});
}
}

Info windows code

I have a problem. I can't put each marker with info windows, neither the description
example:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
var map
function initialize() {
var centerLatlng = new google.maps.LatLng(38.697476,-9.207047);
var myOptions = {
zoom: 12,
center: centerLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var placescoordjs = {{=XML(response.json(placescoord))}}
var marker, i;
for (i = 0; i < placescoordjs.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(placescoordjs[i][0],placescoordjs[i][1]),
map: map
});
}
}
function mymarker() {
var myLatlng = new google.maps.LatLng({{=coordenadas[0]}},{{=coordenadas[1]}});
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"My Marker!!"
});
map.setCenter(myLatlng);
marker.setMap(map);
}
var infowindow = new google.maps.InfoWindow({
content: "<html>https://pt.wikipedia.org/wiki/Lisboa</html>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I have this code. I have a database that "puts" the markers in the map but how i can add each marker the description and a info windows?
You have to create the infoWindow, and bind it to the marker using google.maps.event.addListener...
it's all in the doc you've posted:
var infowindow = new google.maps.InfoWindow({
content: "<html>your html</html>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
try to update your initialize method to something like this:
function initialize() {
var centerLatlng = new google.maps.LatLng(38.697476,-9.207047);
var myOptions = {
zoom: 12,
center: centerLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var placescoordjs = {{=XML(response.json(placescoord))}}
var marker, i;
for (i = 0; i < placescoordjs.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(placescoordjs[i][0],placescoordjs[i][1]),
map: map
});
/* Creates the infowindow */
infowindow = new google.maps.InfoWindow({
content: "<html>your html</html>"
});
/* Bind the infowindow to the marker */
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}

Categories

Resources