Develop Reference

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>

how to change the google map marker dynamically with the model value in javascript

im showing one blue marker while voltage is not 0 , i want to show marker as red marker while voltage is 0.
if #Model.RVoltage==0 or #Model.YVoltage==0 or #Model.BVoltage == 0 then marker icon should be red.
<script>
function initMap() {
var myLatLng = new google.maps.LatLng(45.804270950051844, 122.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: #Model.RVoltage==0 || #Model.YVoltage==0 || #Model.BVoltage==0 ?'http://maps.google.com/mapfiles/ms/micons/red.png' : 'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "1",
});
var contentString = 'no 102';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
marker.setMap(map);
}
</script>

Is there a way to add location to the label of a marker that is randomly placed in google maps with javascript?

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>

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);
});
}

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);
});
}
}