Google Map Using Google Map JavaScript API

This PHP rest tutorial help to get latitude and longitude with help of address using rest API, The Google Map is used to display address location on the web page, which can be helpful to find the direction and location of the address,

Here I am using Google Map JavaScript API to get the latitude and longitude of an address. You can use these parameters to display maps, We will also show HTML code to display maps using Google Map JavaScript API.

Table of Contents

How to use Google Map API Using PHP

We will use Google Map API with PHP, You can get more information about developer’s guide. You must register your project with the google developer console to get Google Map API key.

Now we will create PHP script to get latitude and longitude with formatted address, we will use 'maps.google.com/maps/api/geocode' end points to get lat and lng of address.

function geocode($address){
 
    // url encode the address
    $address = urlencode($address);
    
    // google map geocode api url
    $url = "http://maps.google.com/maps/api/geocode/json?address={$address}";
 
    // get the json response from url
    $resp_json = file_get_contents($url);
    
    // decode the json response
    $resp = json_decode($resp_json, true);
    // response status will be 'OK', if able to geocode given address
    if($resp['status']=='OK'){
    	//define empty array
 		$data_arr = array(); 
        // get the important data
        $data_arr['latitude'] = isset($resp['results'][0]['geometry']['location']['lat']) ? $resp['results'][0]['geometry']['location']['lat'] : '';
        $data_arr['longitude'] = isset($resp['results'][0]['geometry']['location']['lng']) ? $resp['results'][0]['geometry']['location']['lng'] : '';
        $data_arr['formatted_address'] = isset($resp['results'][0]['formatted_address']) ? $resp['results'][0]['formatted_address'] : '';
        
        // verify if data is exist
        if(!empty($data_arr) && !empty($data_arr['latitude']) && !empty($data_arr['longitude'])){

            return $data_arr;
            
        }else{
            return false;
        }
        
    }else{
        return false;
    }
}

How to Display MAP Using Google Map API

We will display google map using google map javascript API, We will pass latitude and longitude to google Map instance to display google map, I am creating simple Map, You can create more advanced map using more options.We will use google API key to access data from the google API server.

<div id="map"></div>

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(39.742043, -104.991531),
  zoom: 12
});
<script src="https://maps.googleapis.com/maps/api/js?key=api_key&amp;callback=initMap" async="" defer=""></script>

We have created a div container which will use to display map, We have created 'map' instances using google map, and passed latitude and longitude coordinates to display map.

Included maps api at the end of file with map api key and callback method, You need replace api key with your api key. The callback parameter executes the initMap() function after the Google map javascript API loads. The async attribute allows the browser to continue rendering the rest of your page while the API loads.