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);
});
}
}
Related
i have one marker in google map . and it has one info window with some content . i want it should open automatically when page renders not in click event .
function initMap() {
var myLatLng = new google.maps.LatLng(22.804270950051844, 86.18359432304942),
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 = 'no 1';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
marker.setMap(map);
}
don't put in listener but in body initMap code
function initMap() {
var myLatLng = new google.maps.LatLng(22.804270950051844, 86.18359432304942),
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 = 'no 1';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, marker);
}
and if you have problem with overlapping try assigne a proper new position eg:
(position by default contains the LatLng of the object at which this info window is anchored)
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: new google.maps.LatLng(22.80427+ 0.000005 , 86.18359+ 0.000005)
});
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>
Is it possible to add the LatLng to the label of the marker that is placed at random to show where that marker is? Also considering the infoWindow option but have not been successful yet.
var map;
var markers = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markersIndex = 0;
function initialize() {
var Wilm = new google.maps.LatLng(34.2257,-77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map-
canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
label: markers[markersIndex++ % markers.length],
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
Not sure what you mean by a label.
this will add markers to the map with an info window with the latlng:
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
<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=KEY&callback=initMap">
</script>
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>
Here is my fiddle link.
I added markers to the maps, also infowindows for every marker.
But only one infowindow appears?
Here you go:
var ships = [['63.44204833', '10.40340333'], ['63.49261667', '9.92661167'], ['63.43243500', '10.37030833'], ['63.43896000', '10.40036167'], ['63.64856000', '10.67950167'], ['63.43330667', '10.36608000'], ['63.43840500', '10.40874000'], ['63.78920833', '11.19232167'], ['63.45155667', '10.20245833'], ['63.43366667', '10.36150000'], ['63.43956667', '10.40019333'], ['63.47066500', '10.33613500'], ['63.43928333', '10.40971667'], ['63.43822000', '10.39873167']];
var map;
var infowindow = new google.maps.InfoWindow({
content: 'bla'
});
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(63.65, 10.65);
var myOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function createMarker(lat, lon, html) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: html
});
createInfoWindow(marker);
}
function createInfoWindow(m) {
google.maps.event.addListener(m, 'click', function() {
infowindow.open(map, m);
});
}
function processShips(ships) {
for (var i = 0; i < ships.length; i++) {
createMarker(ships[i][0], ships[i][1], 'bla');
}
}
function load(ships) {
initialize();
processShips(ships);
}
load(ships);
Working example.
Simply add var in front of marker in your createMarker function
var marker = new google.maps.Marker({....