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

Share Me
  •  
  •  
  •  
  • 3
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    3
    Shares

Hello dev’s . Do you want to know how we can integrate google API and also want to get Latitude and Longitude for locations? Then this is perfect tutorials for you.  If we are working on PHP, ASP.net or any other frameworks and we want to integrate google API and also we want to get Latitude and Longitude for location then you can read this post. On that times we have mostly fetch some problem when we set google map because we tried and we also fetch same problem. But now i will giving you with search location and get Latitude and Longitude of that location. You have to use html file, css file and js file as i write under and use them in your application. Here i will show you How to get Lat and Lon from google map API in Jquery PHP.

First we need to create a simple html file. So now create folder in your system and create new index.html file and copy index.html file as i give you under section.

Index.html

<title>How To Use Google Map API<</title>  
    <link href="map.css" rel="stylesheet">  

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"><</script>  
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"><</script>  
    <script src="map.js"><</script>  
      
      
    <div id="map" class="">  
         <input id="pac-input" class="controls" placeholder="insert the location" ame="location" type="text">  
         <div id="map-canvas"> <</div>  
         <input name="lat" class="lat" type="hidden">  
         <input name="lon" class="lon" type="hidden">  
    </div>

Now you need to create a js file for generate google map on it. So now create new js file with name “map.js” and put bellow code.

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 we need to create a css file for make some design for our map.Now create a map.css file and put bellow code on this file.

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;  

    }  

Read Also : How to Get Specific Attributes from Laravel Collection?

Thanks for read. I hope it help you. For more you can follow us on facebook

@N@

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →