Computer Magic Logo
Draggable marker

Thursday, December 1, 2016

Published by Aristotelis Pitaridis

Google maps allow us to create draggable markers which will allow the user to change the position of the marker using the mouse. 

<!DOCTYPE html>
<html>
<head>
    <style>
        #map {
            height: 400px;
            width: 600px;
        }
    </style>
</head>
<body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
        function initMap() {
            var location = { lat: 35.339186, lng: 25.1315903 };
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: location
            });
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                draggable: true
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>

We can add event listeners in order to change something on the browser when the user drags to a new location the marker.

<!DOCTYPE html>
<html>
<head>
    <style>
        #map {
            height: 400px;
            width: 600px;
        }
    </style>
</head>
<body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
        function initMap() {
            var location = { lat: 35.339186, lng: 25.1315903 };
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: location
            });
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                draggable: true
            });

            // Add dragging event listeners.
            google.maps.event.addListener(marker, 'dragstart', function () {
                console.log('Dragg started.');
            });

            google.maps.event.addListener(marker, 'drag', function () {
                console.log('Dragging. Lat:' + marker.getPosition().lat() + ', Lng:' + marker.getPosition().lng());
            });

            google.maps.event.addListener(marker, 'dragend', function () {
                console.log('Drag ended. Lat:' + marker.getPosition().lat() + ', Lng:' + marker.getPosition().lng());
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>