Static Maps API has URL length limit of around 2048 characters. You can hit this limit quickly when adding lot of markers. You can keep URL short by clustering markers together.

Square Based Clustering

Clustering is usually done by dividing map to squares. Square size depends on map zoom level. Markers inside a square are then grouped into cluster. This technique has some limitations. Look at the following image.

Two markers are close to each other. In fact they are so close they are overlapping. Both markers are also the only marker inside their square. Because markers are in separate square they wont be clustered.

Continue reading »

Google   Maps   Php  

Most of the code from previous Static Maps experiments is now put into one clean package. Previously I showed you how to work with markers and bounds. Now we go forward and add zoom and pan controls. It takes only few lines of code. If you just started reading the series check the theory how it works. As a bonus lets add infowindows / bubbles too.

Note! Image above is just a screenshot. You can test final result in the demo.

Create Map and Some Markers

Start by creating new map object and set the size. We also need to give our API key. Markers are positioned on map using location object. Location can be latitude and longitude represented by Google_Maps_Coordinate object. Location can also be map x and y represented by Google_Maps_Point object.

Continue reading »

Google   Maps   Php  

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.

Continue reading »

Google   Maps   Php  

Note! Code shown is now included in Simple Static Maps PHP class. This blog entry is still good for understanding how it was done. Demo code can be considered deprecated.

Previously I showed you how to make a Google Static Map with clickable markers. Several people emailed me to ask how to show infowindow (or infobubble) when marker is clicked. Technique I explain below still needs JavaScript. It is used to open the infowindow. I use jQuery library in the examples.

Image above is just a screenshot. There is a separate page for working demo. Full source code is also available.

Infowindow HTML

First thing we need is HTML code for the infowindow. I wanted it look exactly the same as in Google Maps. I opened a random map and copied the HTML using FireBug inspect console.

Continue reading »

Google   Javascript   Maps  

Note! Code shown is now included in Simple Static Maps PHP class. This blog entry is still good for understanding how it was done. Demo code can be considered deprecated.

Static map is one big image. Markers are embedded inside the image. You can not use traditional <a href=“#”> tags around separate markers. Binding onclick event to separate marker images wont work either. There are no separate markers. Just one large image.

With imagemaps you can specify arbitary areas inside an image which links to given url. Area can be circle, rectangle or polygon. Simple imagemap could look like following:

<map name="marker_map">
  <area shape="circle" coords="75,103,12" href="#">
  <area shape="circle" coords="122,105,12" href="#">
</map>

With imagemaps we can create clickable markers for Google Static Maps. We need to position an imagemap area over each marker. Problem is how to calculate x and y pixel coordinates for each marker.

Continue reading »

Google   Javascript   Maps  

Note! Code for zoom and pan controls shown here is now included in Simple Static Maps PHP class. This blog entry is still good for understanding how it was done. Demo code can be considered deprecated.

In previous part we made a Google Map with sidebar navigation which works even JavaScript turned off. Marker locations and sidebar were parsed from two KML files. Beginning Google Maps Applications is a great book to learn about KML and Google Maps in general.

In this second part of tutorial I show you how to add zoom and pan controls. Again, they work without JavaScript. Be sure to read tutorial part one first. Also check the live demo.

Before going forward I would like to answer a question which has been asked more than once:

Q: What is the point?
A: Two reasons. Websites should degrade gracefully. Page should still have understandable content even if JavaScript is turned off. Second reason is just because it is cool.

Add controls to static map

First we add arrows and plus and minus images on a separate layer. This layer is positioned over the static map. I use Google provided images. Mapki has list of all available images.

Continue reading »

Google   Javascript   Maps  

Google Maps API offers several nice but relatively unknown shortcuts. One of them is new GMarkerManager class. It enables you to easily control at what zoom levels markers are shown.

In the map above if you zoom in twice a marker appears. Zoom in another two times and the marker disappears. This effect can be achieved by using managers addMarker() method. Instead of using something like:

 var marker  = new GMarker(new GLatLng(latitude, longtitude));
 map.addOverlay(marker);

you must use:

 var marker  = new GMarker(new GLatLng(latitude, longtitude));
 var manager = new GMarkerManager(map);
 manager.addMarker(marker, min_zoom, max_zoom); 

Continue reading »

Google   Javascript   Maps  

We recently did a small Google Maps application for ERGO insurance. It consisted of submitting all their offices to Google Maps. KML export of office data was used to create map at ERGO autoabi campaign site. First version used all JavaScript approach to create the sidebar and map on the page. I was not happy with it. Map page was empty for browsers with JavaScript disabled. Page also took too long to render. Two problems I could not ignore.

Second version was mixture of PHP, JavaScript and new static maps API. Map now works without JavaScript. It renders much faster too. Check the working demo to see yourself.

Importing KML

Google offers GGeoXML library for KML parsing. That I ditched in the beginning. It was impossible to create sidebar navigation with it. First I ended up using EGeoXML. It got the job done but as I said earlier was too slow.

To speed things up I parsed KML files and outputted sidebar HTML with PHP. Simplified HTML and PHP below. Do not mind about # hrefs. They will be replaced with something meaningfull later.

Continue reading »

Google   Javascript   Maps