Back to Top

How to Get formatted Address, Latitude, and Longitude from Dragged Google Map Marker

Updated 31 December 2019

In this blog, we will learn how to get a formatted address with latitude and longitude after dragging the Google map marker.

How to create a draggable marker on Google Map

You need to insert the following div where you want to display the map and create the input fields to display City, Post Code, Country, Region / State, Latitude and Longitude. 


JavaScript Code

The following code will generate a draggable marker on the Google map and when you drag the marker it will display city, postcode, country_id, zone_id, Latitude, and Longitude in the input fields.

Start your headless eCommerce
Find out More

*Note:- We have converted Country and Region / State on the basis of country_id and zone_id.

By this code, you can add a draggable marker on Google Map


By this code, The dragend event is fired.


Complete Code

<div id="webkulMap" style="height: 280px;"></div>
<input type="text" name="latitude" value="" placeholder="latitude" id="latitude"/>
<input type="text" name="longitude" value="" placeholder="longitude" id="longitude"/>
<input type="text" name="city" value="" placeholder="City" id="input-city"/>
<input type="text" name="postcode" value="" placeholder="Post Code" id="input-postcode"/>
<input type="text" name="country_id" value="" placeholder="country" id="input-country"/>
<input type="text" name="zone_id" value="" placeholder="zone" id="input-zone"/>

<script src="'Google Map API Key'">
<script src="">

<script type="text/javascript">
    var map;
    var marker;
    var myLatlng = new google.maps.LatLng(your_address_latitude, your_address_longitude);
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();
    function initialize() {
        var mapOptions = {
        zoom: 3,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        map = new google.maps.Map(document.getElementById("webkulMap"), mapOptions);
        marker = new google.maps.Marker({
            map: map,
            position: myLatlng,
            draggable: true

        google.maps.event.addListener(marker, 'dragend', function() {
            geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        var address_components = results[0].address_components;
                        var components={};
                        jQuery.each(address_components, function(k,v1) {jQuery.each(v1.types, function(k2, v2){components[v2]=v1.long_name});});
                        var city;
                        var postal_code;
                        var state;
                        var country;

                        if(components.locality) {
                            city = components.locality;

                        if(!city) {
                            city = components.administrative_area_level_1;

                        if(components.postal_code) {
                            postal_code = components.postal_code;

                        if(components.administrative_area_level_1) {
                            state = components.administrative_area_level_1;

                        if( {
                            country =;
                            url : 'url',
                            data: {state : state, country : country},
                            type: 'POST',
                            success: function(data) {

              , marker);
    google.maps.event.addDomListener(window, 'load', initialize);



So here we end with this blog.


. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home