123132

<!DOCTYPE html>
<html>
<head>

    <title>Google Maps with pre-set markers and ability to add</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
    <div id="map" style="height: 400px; width: 500px;">
    </div>
    <script type="text/javascript">
        var locations = [
            ['Zoopark', 43.209857, 27.936020, 4],
            ['Palm Beach', 43.202778, 27.924908, 5],
            ['Monument', 43.206188, 27.931162, 3],
            ['VUM', 43.211926, 27.909179, 2],
            ['Hospital', 43.213609, 27.917973, 1]
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: new google.maps.LatLng(43.2072596, 27.9051413),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });

            map.addListener('click', function (e) {
                placeMarkerAndPanTo(e.latLng, map);
            });
        }

        function placeMarkerAndPanTo(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });
            map.panTo(latLng);
        }
    </script>
</body>
</html>