Google Draggable Marker Maps

Fetch Address, latitude & longitude based on marker.

techhawa-googlemaps-api-home

Amarker identifies a location on a map. By default, a marker uses a standard image. Markers can display custom images, in which case they are usually referred to as "icons." Markers and icons are objects of type Marker and they are designed to be interactive. For example, by default they receive 'click' events, so you can add an event listener to bring up an info window displaying custom information

#1.Source Code

Now copy and paste the below code as .html file on your local or online server.

<!DOCTYPE html>
<html>
    <head>

        <title>Techhawa Google Map API</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <style>
        #myMap {
		   height: 350px;
		   width: 680px;
		}
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
		</script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript"> 
            var map;
            var marker;
            var myLatlng = new google.maps.LatLng(12.9560848,77.71658);
            var geocoder = new google.maps.Geocoder();
            var infowindow = new google.maps.InfoWindow();
            function initialize(){
                var mapOptions = {
                    zoom: 18,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
		       
                map = new google.maps.Map(document.getElementById("myMap"), mapOptions);
                
                marker = new google.maps.Marker({
                    map: map,
                    position: myLatlng,
                    draggable: true 
                });     
                
                geocoder.geocode({'latLng': myLatlng }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            $('#address').val(results[0].formatted_address);
                            $('#latitude').val(marker.getPosition().lat());
                            $('#longitude').val(marker.getPosition().lng());
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                        }
                    }
                });

                               
                google.maps.event.addListener(marker, 'dragend', function() {

                geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            $('#address').val(results[0].formatted_address);
                            $('#latitude').val(marker.getPosition().lat());
                            $('#longitude').val(marker.getPosition().lng());
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                        }
                    }
                });
            });
            
            }
            
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>  
    </head>
    <body>
        <div id="myMap"></div><br/>
        <div>
            <input id="address"  type="text" style="width:600px;"/>
            <br/>
            <input type="text" id="latitude" placeholder="Latitude"/>
            <input type="text" id="longitude" placeholder="Longitude"/>


        </div>
    </body>
</html>

#2.Run the file

open the file in the browser and you will see the result as shown below.

You can use input fields(storing the values) for your application.

techhawa-google-maps-api

For live demo you can below video.

Know More About Amazon web simple storage service.


Live Demo