How to get Lat and Lon from google map API in Jquery PHP?

Index.html

Now you have to create js file for generate google map. so create new js file with “map.js” name.

map.js

var geocoder;  
var map;  
var infowindow = new google.maps.InfoWindow();  
var marker;  
var g_err = 0;  
function initialize() {  
  var markers = [];  
  var mapOptions = {  
    zoom: 7,  
    center: new google.maps.LatLng(42.72, 12.00),  
    mapTypeId: google.maps.MapTypeId.ROADMAP,  
    mapTypeControl: false,  
    streetViewControl: false  
  };  
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);  
  // Create the search box and link it to the UI element.  
  var input = document.getElementById('pac-input');  
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);  
  var searchBox = new google.maps.places.SearchBox(input);  
  // [START region_getplaces]  
  // Listen for the event fired when the user selects an item from the  
  // pick list. Retrieve the matching places for that item.  
  google.maps.event.addListener(searchBox, 'places_changed', function() {  
    var places = searchBox.getPlaces();  
    if (places.length == 0) {  
      return;  
    }  
    for (var i = 0, marker; marker = markers[i]; i++) {  
      marker.setMap(null);  
    }  
    // For each place, get the icon, place name, and location.  
    markers = [];  
    var bounds = new google.maps.LatLngBounds();  
    for (var i = 0, place; place = places[i]; i++) {  
      var image = {  
        url: place.icon,  
        size: new google.maps.Size(75, 75),  
        origin: new google.maps.Point(0, 0),  
        anchor: new google.maps.Point(17, 34),  
        scaledSize: new google.maps.Size(25, 25)  
      };  
      // Create a marker for each place.  
      var marker = new google.maps.Marker({  
        map: map,  
        icon: image,  
        title: place.name,  
        position: place.geometry.location  
      });  
      $('.lat').val(marker.position.lat());  
      $('.lon').val(marker.position.lng());  
      alert('Lat :' + marker.position.lat() + ' Lon :' + marker.position.lng());  
      markers.push(marker);  
      bounds.extend(place.geometry.location);  
    }  
    map.fitBounds(bounds);  
  });  
  // [END region_getplaces]  
  // Bias the SearchBox results towards places that are within the bounds of the  
  // current map's viewport.  
  google.maps.event.addListener(map, 'bounds_changed', function() {  
    var bounds = map.getBounds();  
    searchBox.setBounds(bounds);  
  });  
}  
google.maps.event.addDomListener(window, 'load', initialize);  

At last create css file for make some design for your map.

map.css

    #map  
    {  
        height: 300px;  
        width: 100%;  
        margin: auto auto;  
        border: solid 2px #0d6b7a;  
        //box-shadow: 5px 5px 30px grey;  
        -webkit-transform: translateZ(0);  
        z-index: 10;  
    }  
    #map-canvas {  
        height: 100%;  
        width: 100%;  
        margin: 0px;  
        padding: 0px;  
        z-index: 10;  
    }  
    .controls {  
        margin-top: 16px;  
        border: 1px solid #0d6b7a;  
        box-sizing: border-box;  
        -moz-box-sizing: border-box;  
        height: 32px;  
        outline: none;  
        // box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);  
        background-color: floralwhite;  
        border-radius: 5px;  
    }  
    #pac-input {  
        background-color: #fff;  
        font-family: Roboto;  
        font-size: 15px;  
        font-weight: 300;  
        margin-left: 12px;  
        padding: 0 11px 0 13px;  
        text-overflow: ellipsis;  
        width: 80%;  
        z-index: 1081;  
    }  
    #pac-input:focus {  
        border-color: #0088FF;  
    }  
    .pac-container {  
        font-family: Roboto;  
    }  
    #type-selector {  
        color: #fff;  
        background-color: #4d90fe;  
        padding: 5px 11px 0px 11px;  
    }  
    #type-selector label {  
        font-family: Roboto;  
        font-size: 13px;  
        font-weight: 300;  
    }  
    .pac-container {  
        background-color: #FFF;  
        z-index: 20;  
        position: fixed;  
        display: inline-block;  
        float: left;  
    }  

Try this and get Google Map