Reading list Switch to dark mode

    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
    Read 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.


    . . .
    Discuss on Helpdesk

    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