I have been working on a project that required mapping of search results. Of course it was quickly decided that Google Maps was the way to go. Today I would like to go over some of the things I learned about using google maps.
First we needed a way to determine the gps coordinates of the sites we wanted to map. Google provides a url that will return an XML file with a set of coordinates for a given address or even just a postal code.
To process the XML in php, I used SimpleXML.
$postal=”3111+World+Dr.+Lake+Buena+Vista,+FL+32830″;
$xml= file_get_contents(“http://maps.googleapis.com/maps/api/geocode/xml?address=$postal&sensor=false”);
$coord = new SimpleXMLElement($xml);
if ($coord->status == ‘OK’) {
$longitude=$coord->result->geometry->location->lng;
$latitude=$coord->result->geometry->location->lat;
}
Once we had the gps coordinates we needed to map the points on a google map. First things we need to set are the size of the map and the size of our content dialog. We also need to call a css file for the map.
<link href=”http://code.google.com/apis/maps/documentation/javascript/examples/default.css” rel=”stylesheet” type=”text/css” />
<style>
#content {
width: 320px;
height:140px;
}
#map_canvas {
width: 935px;
height: 650px;
}
</style>
We decided to use the javascript api for google maps. So we are going to need to include that.
<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script>
Now we need to initialize the map and plot our points. First we will need to new LatLon objects for each point
<script type=’text/javascript’>
function initialize() {
var myLatlng = new google.maps.LatLng(<? echo $latitude.”,”.$longitude ?>);
Then we need to define our map options. You will note that I have zoom set to a php variable of the same name. I will discuss how to determine zoom a little later. For the JavaScript to work zoom will need a value.
var myOptions = {
zoom: <?=$zoom ?>,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
Create the map object. You will need a div with an id of “map_canvas” in your html.
var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
Create one infowindow. We will see why we only need one later.
var infowindow = new google.maps.InfoWindow();
Create a marker for each point you want to plot.
var marker<? $i ?> = new google.maps.Marker({
position: myLatlng,
map: map,
title:”<?=$marker_name[$i] ?>”
});
Create a contentString for each point you want to plot.
var contentString<? $i ?> =”What ever you want to say”;
Next you will need to create event handler for each marker. You will notice that we are only using the one infowindow. That will allow the site to appear to close and open infowindows for each marker. If we used an infowindow for each marker, the infowindows would remain open as we open a new one and clutter the map eventually. By using one infowindow, we can easily close it and move it to the new marker that was just clicked on.
google.maps.event.addListener(marker<?=$i; ?>, ‘click’, function() {
infowindow.close();
infowindow.setContent(contentString<?=$i; ?>);
infowindow.open(map,marker<?=$i; ?>);
});
)
</script>
Finally, I said that I would tell you how I calculated the proper zoom level. To calculate the proper zoom level you first need to determine the distance between the furthest points. My points were all stored in a database so I used mysql’s min and max functions to get largest and smallest longitude and latitude. From there I calculated the distance using the following formula.
<?php
$distance=acos(sin($latmin)*sin($latmax)+cos($latmin)*cos($latmax)*cos($longmax-$longmin))*6371;
?>
To calculate the zoom, I took the distance and the smaller of the map dimensions and used the following php function.
function distance2zoom($distance, $mapsize) {
$zoom=floor(13-log(1.6446* $distance/sqrt(2*$mapsize*$mapsize))/log(2));
return $zoom;
}
?>
When I found this function on the web, it originally used 8 instead of 13 but my maps were way too big for the points so I changed it and it now works well.
Thank you for reading my blog on Mapping locations with Google Maps. I hope you have enjoyed it. If you have any questions feel free to ask.