Lizzeelike's world

Trying to organize myself…

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:
  1. require(‘../GoogleMapAPI.class.php’);
  2. $map = new GoogleMapAPI(‘map’);
  3. // setup database for geocode caching
  4. //$map->setDSN(”);
  5. // enter YOUR Google Map API Key
  6. $map->setAPIKey(‘ABQIAAAAELfROqT4H8BC1qx4nXBjrRSwjRbdwkH4E4hnOSLZaUf7QmxmVRR3kIyLy-_UpNLuCQwydLfAaaLvMg’);
  7. //for REDWOOD
  8. $map->setWidth(’245px’);
  9. $map->setHeight(’155px’);
  10. // create some map markers
  11. $address=$arpostinfo[0]["PostCode"];
  12. $map->addMarkerByAddress($address,$arpostinfo[0]["PostCode"],’<b>’.$arpostinfo[0]["PropertyStreet"].’</b>’);
  13. $geocode = $map->getGeocode($address);
  14. $map->adjustCenterCoords($geocode['lon'],$geocode['lat']);
  15. $map->disableSidebar();
  16. $map->disableTypeControls();
  17. $map->disableMapControls();
  18. $map->disableDirections();
  19. $map->disableZoomEncompass();
  20. $map->disableScaleControl();
  21. $map->disableOverviewControl();
  22. $map->setZoomLevel(15);
  23. $map->printHeaderJS();
  24. $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:
  1. <?php $map->printMap(); ?>
  2. <script type=”text/javascript”  charset=”utf-8″> 
  3. // <! [CDATA[ 
  4. if (GBrowserIsCompatible()) {
  5. document.write('<div id="map" style="width: 265px; height: 155px"></div>');
  6. }
  7. else{
  8. document.write('<b>Javascript must be enabled in order to use Google Maps.</b>');
  9. }
  10. // ]]>
  11. </script> <b>Javascript must be enabled in order to use Google Maps.</b><span data-mce-type=”bookmark” id=”__mce”></span>
  12.  <noscript> 
  13. <b> Javascript must be enabled in order to use Google Maps.
  14. </b>
  15.   </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

 

 

 

 

 

Follow

Get every new post delivered to your Inbox.