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

Question

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

Answer 1

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>