Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
$map_link = "http://maps.google.com/staticmap?key={$key}&size={$w}x{$h}¢er={$lat},{$lng}&zoom={$z}";
Then, we can generate north, south, east, and west links as follows (this example assumes the existence of a mercator projection class with standard xToLng, yToLat, latToY, lngToX routines):// a mercator objectSo that our north, south, east, west links are:
$mercator = new mercator();
// we'll pan 1/2 the map height / width in each go
// y pixel coordinate of center lat
$y = $mercator->latToY($lat);
// subtract (north) or add (south) half the height, then turn
back into a latitude
$north = $mercator->yToLat($y - $h/2, $z);
$south = $mercator->yToLat($y + $h/2, $z);
// x pixel coordinate of center lng
$x = $mercator->lngToX($lng);
// subtract (west) or add (east) half the width, then turn back into a longitude
$east = $mercator->xToLng($x + $w/2, $z);
$west = $mercator->xToLng($x - $w/2, $z);
$north = "http://maps.google.com/staticmap?key={$key}&size={$w}x{$h}¢er={$north},{$lng}&zoom={$z}";Of course if you're serving a page knowing only a list of points and their geocodes, then you don't have a zoom level value for calculating the map links. Thankfully, mercator projection implementations often offer a 'getBoundsZoomLevel(bounds)' function, which serves this purpose (create your bounds by finding the minimum and maximum latitudes and longitudes of your list of geocodes). If your implementation doesn't provide this function, it's not complicated to write, but I'll leave that to the reader (hint: find difference in x and y values at various zoom levels and compare these to your map width and height).
$south = "http://maps.google.com/staticmap?key={$key}&size={$w}x{$h}¢er={$south},{$lng}&zoom={$z}";
$east = "http://maps.google.com/staticmap?key={$key}&size={$w}x{$h}¢er={$lat},{$east}&zoom={$z}";
$west = "http://maps.google.com/staticmap?key={$key}&size={$w}x{$h}¢er={$lat},{$west}&zoom={$z}";
<html style='height: 100%'>That’s it. To test this yourself, just save the raw file, open the file with a browser and you will have a copy of the accidents map running locally on your computer. The code mainly deals with setting up Google Maps, with one critical line that sets up Fusion Table integration:
<head>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript'>
function initialize() {
var bc_office = new google.maps.LatLng(37.788901, -122.403806);
var map = new google.maps.Map(document.getElementById('accident-map'), {
center: bc_office,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var accidents_layer = new google.maps.FusionTablesLayer(433634);
accidents_layer.setMap(map);
}
</script>
</head>
<body onload='initialize()' style='height: 100%; margin: 0px; padding: 0px'>
<div id="accident-map" style='height: 100%'></div>
</body>
</html>
var accidents_layer = new google.maps.FusionTablesLayer(433634);You can expand this integration by filtering the results through the use of Fusion Tables’ sql-like query syntax. As an example, to display accidents from May 2009, change the line above to look like this:
var accidents_layer = new google.maps.FusionTablesLayer(433634, {A quick gotcha to point out here is that Google Maps v3 only supports a
query: 'SELECT FullAddress FROM 433634 WHERE Year=2009 AND Month=5'
});
SELECT
operation on the location value column. So the location query above works just fine, but the COUNT
query needed to get the number of accidents does not work:'SELECT COUNT() FROM 433634 WHERE Year=2009 AND Month=5'Instead, to get the number of accidents in this case, you can use the Fusion Tables API endpoint directly:
https://www.google.com/fusiontables/api/query?sql=SELECT COUNT() FROM 433634 WHERE Year=2009 AND Month=5You can see the actual response from the count query here. Because The Bay Citizen is built on the Django framework, we can leverage the Python libraries Google provides for query generation and API calls. Also, since the location query is so similar to the count query, I consolidated the filter logic so it happens on the server side using a jQuery AJAX call. As a result, when users apply a filter, they see an updated map and results bar all thanks to the following few JavaScript lines:
$('#filter-form').ajaxForm({I was really happy with this approach. The performance hit is negligible, the code is much cleaner, and the filter logic is rewritten in the programming language I currently know best (Python).
success: function(responseText, statusText) {
var data = $.parseJSON(responseText);
accidents_layer.setMap(null);
accidents_layer = new google.maps.FusionTablesLayer(433634, {
query: data.map_query});
accidents_layer.setMap(map);
$('#filter-results').html(data.results);
}
});