Google Map with a Marker with PHP & Google Map API

This php tutorials help to understand google map and integration of google map JavaScript api using PHP and jQuery. We will create map using constant address and get coordinate to display marker on that location.

MAP is very important functionality to display direction of address into contact us page,You can also add map into wiki to tell the direction of your business location.The google provides the google map to create map for your location, google also providing map api for access google maps methods and functionality features.

Google providing google map js libs to access map methods using api, We will use static city name and get latitude and a longitude using google map api, then we will send latitude and a longitude to map instance to display map.The Google map has Zoom level for map, the zoom value vary between 1 and 20, 20 being the most zoomed-in value, and 1 being the most zoomed-out.


Let’s Start to Add Google Map Using PHP

This PHP tutorial help to display simple google map with a marker to a web web page.We will use some HTML, CSS and JavaScript code to display map. For an advanced guide to creating maps, read the developer’s guide.There are following steps will follow into this google map tutorial,

  • Get an Google Map API key.
  • We will create a div that will display map.
  • We will create api wrapper in php that will get formatted address,latitude and longitude using City name
  • We will create Ajax request that will call above php API and passed data to google map instance.

The file structure are,

  • index.php : This file will have all css, JavaScript and html code.
  • map_api_wrapper.php : This file will use to create method to get latitude and longitude.

How to get Google API Key

  • Go to the Google API Console
  • Create or select a project.
  • Click Continue to enable the API and any related services.
  • Now Credentials page will open and get key.

Step 1: We will created index.php file added below HTML code into this file.

We have included bootstrap and jquery libs into head section of this file, created a div container which id is '#map', this div will responsible to display map, Also Added some css for map div container.

Step 2: We create map_api_wrapper.php file that will use google api to get latitude and longitude using City name, added below code into this file.

created get_geocode() method that takes address as parameter, fetch data from google api using address.We called get_geocode() method at the end of file that response address information as a json data.

Step 3: We will create AJAX call to fetch data from map_api_wrapper.php file and send map function to display map.We will add below code into footer of the index.php file.

Created AJAX call to fetch data from map_api_wrapper file.

Added google map JavaScript api at the end of file, this file uses google api key and initialize map method.You need replace api key with your api key. The callback parameter executes the get_geocode() 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.

We are using JavaScript getElementById() function to find the map div on the web page.

The new google.maps.Map() creates a new Google maps object. The center property tells the API where to center the map. The map coordinates are set in the order: latitude, longitude.The map including the center and zoom level of location.


We have created google map using google javascript map api, We have also set marker into the map.You can also set other properties of map as well, this is basic php tutorial to help out add map with marker using google javascript map api.

You can download source code and see Demo from below link.

3 thoughts on “Google Map with a Marker with PHP & Google Map API

  1. Thank you. But is not working.
    Link of download source button:
    Error: Oops! That page can’t be found.
    It looks like nothing was found at this location. Maybe try one of the links below or a search?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.