How to Place Multiple Markers on Google Map

Placing Google Maps on the contact us or where ever you want on the pages either single marker or multiple markers

Just Copy Paste the Code where you wanna to see google maps in your pages

<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
<style>
#map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}
</style>
<script>
jQuery(function($) {
console.log("Asynchronously Loaded the map API");
    // Asynchronously Load the map API
    var script = document.createElement('script');
    script.src = "//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize&key=AIzaSyAlge0b6nOz9_cBaHZlTyAZ-S4d8RLC0Xc";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
                 
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
     
    // Multiple Markers
    var markers = [
        ['Heading 1', 16.239206, 80.051687],
        ['Heading 2', 16.972087, 81.797119]
    ];
                     
    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>Heading  1 </h3>' +
        '<p>The Heading  1 is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Heading  2</h3>' +
        '<p>The  Heading  2 is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];
     
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
 
    // Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
     
        // Allow each marker to have an info window  
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(7); //If you have not seen the markers please change the zoom value
        google.maps.event.removeListener(boundsListener);
    });
 
}
</script>