Simple Static Maps With PHP
October 10th, 2008
Lately I have been playing with Google Static Maps API a lot. Writing the same things again and again is tedious job. I decided to put the code together as one clean extendable package. Writing object oriented interface for generating URL is trivial. Real meat is having working zoom and pan controls on static map with just 9 lines of code (demo now includes also clickable markers and infowindows).
Code is still alpha quality. API might change any time. But here is a quick walkthrough of current features. We will build the map you see above step by step.
Create a Map Object
Map object is created using Google_Maps::create(‘static’) factory method. If no markers are set you also need to set the center of the map.
require_once 'Google/Maps.php';
$map = Google_Maps::create('static');
$map->setSize('540x300');
$map->setCenter(new Google_Maps_Coordinate('58.368488', '26.768908'));
$map->setZoom(8);
$map->setKey(API_KEY);
Add some markers
Location on map can be in two ways. Latitude and longitude represented by Google_Maps_Coordinate object. Or pixel x and pixel y location represented by Google_Maps_Point object. You can use both when creating a marker.
$coord_1 = new Google_Maps_Coordinate('58.378700', '26.731110');
$coord_2 = new Google_Maps_Coordinate('58.368488', '26.768908');
$coord_3 = new Google_Maps_Coordinate('58.268488', '26.768908');
$marker_1 = new Google_Maps_Marker($coord_1);
$marker_2 = new Google_Maps_Marker($coord_2);
$marker_3 = new Google_Maps_Marker($coord_3);
$marker_1->setColor('green');
$marker_2->setColor('blue');
$marker_3->setColor('orange');
$map->setMarkers(array($marker_1, $marker_2, $marker_3));
Automatically Calculate Zoom and Center
Google Static Maps API can automatically calculate zoom and center for you. However there is no way to know what zoom level it chose. If you need to know automatically calculated zoom and center use $map->zoomToFit() method.
Here we also add new marker using pixel coordinates. Note that we also clear the center of the map we set in the beginning. This allows map to recenter the map according to markers on the map.
$point_1 = new Google_Maps_Point('308107197', '160958681');
$marker_4 = new Google_Maps_Marker($point_1);
$map->setCenter(false);
$map->addMarker($marker_4);
$map->zoomToFit();
Show Marker Bounds
Sometimes you need to be able to visually see bounding box where all the markers fit in.
$map->showMarkerBounds();
Show Map Bounds at Chosen Zoom Level
You can also calculate and show map bounds at any zoom level. Example below displays map bounds at zoom level 8. Map itself is at zoom level 7.
$map->setZoom(7); $map_bounds = $map->getBounds(8); $map->setPath($map_bounds->getPath());
Where’s the Source?
If you want to play around with code you can get from github. Patches, improvements and suggestion are welcome.
git clone git://github.com/tuupola/php_google_maps.git
wget http://github.com/tuupola/php_google_maps/zipball/master
Related entries: Infowindows With Google Static Maps, Clickable Markers With Google Static Maps.
October 14th, 2008 at 02:40 PM
Hi Mike,
been following your Google Maps related blogposts (and the others too of course) for quite some time now. Very nice work I must say!
Regards, B!
October 15th, 2008 at 11:43 AM
Thanks :) Keep your eye on the Static Maps class. I should be able to finish infowindow / infobubble support during this weekend. If you have any suggestions let me know.
October 17th, 2008 at 07:22 PM
Hi Mike, great work and fine code in your google maps classes. Now it’s easy to get the right hot spots on a static map.
Greetings from Germany
October 18th, 2008 at 12:04 PM
Sunfish: Glad to hear. If you have any example links please post them here (or send me an email). I would be interested in seeing how people are using the code.
October 24th, 2008 at 10:06 AM
Can i provide zoom in or/and zoom out functionality, for static google map?
October 24th, 2008 at 04:20 PM
msm: Quote from beginning of this blog entry “Real meat is having working zoom and pan controls on static map”. So answer is yes. You can see it working at the demo page.
That page was recently updated to have markers and infowindows too. These are all done without using any JavaScript.
October 30th, 2008 at 01:40 AM
Very nice class. The version I downloaded had an issue with printing html entities without ; at the end…easily fixed. The layout of the info bubbles is also a bit off but that’s fine too (I read the disclaimer:). Actually this doesn’t both me since I’m thinking of using the click-on-marker, to make the map center and zoom…perhaps display the bubble info outside of the image as simple text. I’m having so much fun with this class, makes it very easy to deliver maps for browsers (like mobile) that dont have full JS/CSS support. Very nice work.
October 30th, 2008 at 06:06 PM
mike z: Thanks! When you publish something send me a link. I would be interested in seeing what people are doing.
April 24th, 2009 at 11:18 AM
Hi Mike,
I’m trying to accomplish something that I am not sure can be done. Your code is the closest thing I’ve found to my requirements, so maybe you can point me in the right direction (or show me a stop sign by saying ‘it can’t be done’).
1. I need a Google Map at zoom level 0 (showing the whole world) 2. However, I need the map to be larger than the default 256px from Google 3. The map at zoom level 1 is too large for my needs
4. solution? I thought about creating a static map at zoom level 0 and then modifying the image size to fit my needs (325px width)
5. But… I need to show points in this map, based on latitude/longitude. From your explanations, I understand this can be done on static maps using a formula to convert lat/long to pixels. But reading your code, I am not sure this calculation can be done on a static map whose image size has been changed. The calculation is based on the map center location and the zoom level used, so I am guessing that you are assumming that the size of the map corresponds to the one returned by Google at zoom 0: 256px.
6. Maybe I am completely wrong and I missunderstood the code…
7. Question: can I place/remove clicable markers on a static map that I have modified to fit the size I need?
Thanks a lot for your help. I hope you find a minute to tell me ‘yes’ or ‘no’, I’m a bit desperate.
Cheers,
Ramon
April 24th, 2009 at 01:06 PM
Hi Mike Has anything changed or broken with color markers with google static map API?
I’m trying to add different color markers – I can do $marker_1->setColor(‘blue’); if I then do a $marker_1->getColor(); it does return “blue” as expected, but the marker still comes up red when added to the map.
Any ideas?
Thanks
May 16th, 2009 at 06:34 PM
Hi Mika,
I’ve been reading your multiple posts about Google Static Maps, and although I don’t fully understand all the magic behind it, I like the ability to create a working version without using JS, and then apply some progressive enhancenment upon it. And that’s when I get totally lost… :) I can’t understand how, from an static (non-js) version you apply the progressive-enhanced (js) version. Or, in other words, how does it degrades gracefully?
In the meanwhile, I’ll be taking a deeper look again to all articles, trying to understand how all the pieces fit. Thanks.
May 18th, 2009 at 12:01 PM
Maniquí: Actually it is the other way around. Just show the usual JavaScript version to browsers which have JavaScript enabled. This is 99% of the users. For those with JavaScript disabled show the static version generated with PHP. You can use for example <noscript> tag.
September 22nd, 2009 at 11:12 AM
This is not the STATIC map. Your using yust the normal Google Maps engine. Nothing special here??? The static map engine won’t allow any use of Javascript… Just an url and a returned image
September 28th, 2009 at 02:03 PM
xy: You seem to be a bit confused. It is static map. Just disable your JavaScript if you do not believe.
November 15th, 2009 at 06:03 PM
hi, I use setSensor=”true” or setMobile=”true”, don’t work… it’s normal?