Through this post, I am going to share with you “How to apply Google MAP JavaScript V3” with country and city auto-suggest option, and return latitude and longitude. We can select location with the marker also and when user move marker then it returns address, latitude and longitude automatically.

This is the official Google Map site: https://developers.google.com/maps/. Here you can find more tutorials related to Google Maps and their usage.

To apply Google MAP V3, follow the steps given below:

Step 1: Create Google_map.html and include the basic jQuery library. Here you can find the basic jQuery library: http://jquery.com/download/

Step 2:Include the basic jQuery UI library. Here you can find the basic jQuery UI library: http://jqueryui.com/download/

Step 3: Create Google Map API key. Generally, there is no need of API key in Google Maps JavaScript API V3 to function correctly. However, we suggest you to load the Maps API using an API Console key which allows you to monitor your application Map’s API usage.

Follow this link to learn how to use an APIs Console key: https://developers.google.com/maps/documentation/javascript/tutorial#api_key

Sensor is another parameter. If you set it to “true”, then Google Map displays your current location wherever you are. If it is “false” then it shows you the default location (set by Google).

Step 4: Apply Google code. Create a map.js file and place this code

var geocoder;
var map;
var marker;
function initialize(){

// Set default location when sensor is false
var latlng = new google.maps.LatLng(41.659,-4.714);

// Zoom : Set int value to zoom map. You can increase or decrease this according to your requirement
// Map type is

: View google map by default ROADMAP, SATELLITE, HYBRID, TERRAIN

var options = {

// Set zoom level (Map)

zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById(“map_canvas”), options);

// Create display

geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,

// Draggable is for Marker
// Set True : User is able to drag marker
// Set false : User is not able to drag marker

draggable: true
});
}
$(document).ready(function() {

// This function is run after you page load complete

initialize();
$(function() {

//Autocomplete to apply to display address in text box

$(“#address”).autocomplete({

// This bit uses the geocoder to fetch address values

source: function(request, response) {
geocoder.geocode( {‘address’: request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
select: function(event, ui) {
$(“#latitude”).val(ui.item.latitude);
$(“#longitude”).val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);

// Set marker position

marker.setPosition(location);

// Set center search location

map.setCenter(location);
}
});
});

// marker: to display Marker
// drag :Marker is draggable
// When you select address through autosuggest, it return lat and lng and then run this function and set marker location

google.maps.event.addListener(marker, ‘drag’, 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());
}
}
});
});
});