Multiplemarkers.html

<!DOCTYPE html>
<html>

<body>
    <h1>Multiple Land Marks
        <br>
    </h1>
    <center>
        <h3>Click wherever the place you want to add a marker</h3>
    </center>

    <div id="map" style="width:100%;height:500px;"></div>

    <script>

        function myMap() {
            var mapCanvas = document.getElementById("map");
            var myCenter = new google.maps.LatLng(6.8210555, 80.0405499);
            var mapOptions = { center: myCenter, zoom: 12 };
            var map = new google.maps.Map(mapCanvas, mapOptions);
            google.maps.event.addListener(map, 'click', function (event) {
                placeMarker(map, event.latLng);
            });
        }

        function placeMarker(map, location) {
            var marker = new google.maps.Marker({
                position: location,
                map: map, animation: google.maps.Animation.BOUNCE
            });
            var infowindow = new google.maps.InfoWindow({
                content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
            });
            infowindow.open(map, marker);
        }
    </script>


    <script src="https://maps.googleapis.com/maps/api/js?key=(YOUR API KEY)&callback=myMap"></script>


</body>
</html>