Lizzeelike's world

try to do new things, take challenges; then you will able learn

Embed Google Map in your own web pages using PHP

3yrs back, when I was first time assigned to integrat Google Map; I was so confused what to do!! But, when I finish my work, I feel it is very easy task. For embedding Google Map in your own web page,you have to write some lines of codes. I am explaining it step by step…

  • 1st u have to download GoogleMapAPI.class.php
  • Put this file in your project’s root folder. For me I put it in the E:/REDWOODONLINE/GoogleMapAPI.class.php
  • On the top, out side the body tag [ <body></body>]  you have to write some lines of code. those are as follows:
  • require('../GoogleMapAPI.class.php');
    
  • $map = new GoogleMapAPI(‘map’);
  • // setup database for geocode caching
  • //$map->setDSN(”);
  • // enter YOUR Google Map API Key
  • $map->setAPIKey(‘ABQIAAAAELfROqT4H8BC1qx4nXBjrRSwjRbdwkH4E4hnOSLZaUf7QmxmVRR3kIyLy-_UpNLuCQwydLfAaaLvMg’);
  • //for REDWOOD
  • $map->setWidth(’245px’);
  • $map->setHeight(’155px’);
  • // create some map markers
  • $address=$arpostinfo[0]["PostCode"];
  • $map->addMarkerByAddress($address,$arpostinfo[0]["PostCode"],’<b>’.$arpostinfo[0]["PropertyStreet"].’</b>’);
  • $geocode = $map->getGeocode($address);
  • $map->adjustCenterCoords($geocode['lon'],$geocode['lat']);
  • $map->disableSidebar();
  • $map->disableTypeControls();
  • $map->disableMapControls();
  • $map->disableDirections();
  • $map->disableZoomEncompass();
  • $map->disableScaleControl();
  • $map->disableOverviewControl();
  • $map->setZoomLevel(15);
  • $map->printHeaderJS();
  • $map->printMapJS();
  • You must write those line inside the php tag [ <?php ?> ]
  • After you include the googlemapapi class, all the functions will be work automatically.
  • In the line number# 5, you can see; you have to set up  Google Map API Key.  this key will be different for different pages. in my next post I will explain how to get this key.
  • in the line number#13, you can see  PostCode is bolder. this postcode we get from the database by query.if the postcode is not valid, it will not show any perfect MAP.
  • inside the body tag [ <body></body>], where you want to show your map in the web page, there you have to write some line of codes. those are as follows:
  • <?php $map->printMap(); ?> 
  • <script type="text/javascript"  charset="utf-8"> 
  • // <! [CDATA[ 
  • if (GBrowserIsCompatible()) {
  • document.write('<div id="map" style="width: 265px; height: 155px"></div>');
  • }
  • else{
  • document.write('<b>Javascript must be enabled in order to use Google Maps.</b>');
  • }
  • // ]]>
  • </script> <b>Javascript must be enabled in order to use Google Maps.</b><span data-mce-type="bookmark" id="__mce"></span>
  •  <noscript> 
  • <b> Javascript must be enabled in order to use Google Maps.
  • </b> 
  •   </noscript>  
  • When you will write the 1st line, I mean  $map->printMap(); Map will be shown on your web page. other lines are for prevent JScript error.

For more help you have to see the following web pages:

Google Map API, Developers Guide

 here is the image, after embedding map

Advertisement

One Response to Embed Google Map in your own web pages using PHP

  1. shihan September 3, 2011 at 2:39 pm

    very nice and useful post. I search a lot. your post is very clear and informative. this article helps me a lot.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.