How to use Google Maps API with JQuery PHP?

By Hardik Savani May 14, 2024 Category : PHP Javascript jQuery Google Map

if you are working on PHP, asp, or any other framework and you want to integrate google API and also you want to get Latitude and Longitude for location. we have mostly fetched some problems when we set google Maps because I tried and I also fetch problems. but i am giving you with search location and getting the Latitude and Longitude of that location. you have to use HTML files, CSS files and js file as i write under and use them in your system.

first, you have to create a simple html file. so create a folder in your system and create a new index.html file and copy the index.html file as i give you under.

Index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></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>
</head>
<body>
  
    <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>
  
</body>
</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

Read Also: How to Remove Special Characters from a String in JQuery?
    #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

Tags :
Previous

How to Add Pagination with Union in Laravel?
Next

Mysql Hexadecimal Color Code Store in Binary Datatype Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares