How To Get Formatted Address, Latitude, and Longitude From Dragging Google Map Marker?

Suppose you have a contact form with an input field called location or address. Now you want to show the user his or her location in google maps based on the address he or she typed. Or you need their location co-ordinate (latitude and longitude) for that address. To convert addresses into geographic coordinates and geographic coordinates address google maps has Geocoding API.

Now let’s create a Google map with a draggable marker and when you drag the marker let’s generate the Latitude, Longitude, and postal address of the location where you place the marker.       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.

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.

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

Features:

1. Light Weight.
2. Pure Google Map Code.
3. No External Third-party Files.
4. Work With Any Platform.
5. Fully Customizable.

How To Get Formatted Address, Latitude, and Longitude From Dragging Google Map Marker?

There are a few easy and understandable steps to achieve your desired functionality using pure PHP that we are gonna share below. Follow each step perfectly.

HTML:

<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"/>

JavaScript:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=GOOGLE_MAP_API_KEY">
</script>
<script src="https://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(STARTING_LAT, STARTING_LNG);
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(components.country) {
country = components.country;
}

$('#input-country').val(country);
$('#input-city').val(city);
$('#input-postcode').val(postal_code);
$('#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>

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need.

Troubleshooting the Errors:

Do it with concentration and patience. Check your all steps again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy development, See you in the next article.