J'ai décidé d'héberger sur mon site la carte des terrains de baseball et softball de France. Pour cela, je m'appuie sur la très sympathique API de GoogleMaps.
4 choses à voir ensemble :
1. La géolocalisation d'un terrain :
L'objectif est de fournir aux acteurs du baseball et du softball en France une carte précise des terrains. Que votre zone soit couverte finement par GoogleMaps ou pas, peu importe. En mode Carte, il sera très facile à vos visiteurs de préparer son voyage. Rendez vous sur cette page. Zoomez sur la carte, trouvez votre terrain. Cliquez alors sur la zone que vous avez géolocalisée. Si vous vous êtes trompés, recliquez sur le marqueur pour l'effacer.
Dès que c'est ok, remplissez le formulaire. Je le validerai rapidement.
2. La visualisation sur laurentgeffroy.com
La page suivante restitue les terrains qui ont été validés.
3. La visualisation sur GoogleEarth
Cliquez sur le fichier kml pour ouvrir GoogleEarth et naviguer avec le client riche.
4. L'intégration sur votre propre site
Le code Javascript suivant est copier dans votre propre site web et profitez de la carte dans votre propre application. N'oubliez pas de récupérer votre APIKey GoogleMaps pour l'utilisée avec votre domaine.
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2.x&key={MON API KEY GOOGLE DEPENDANTE DU DOMAINE}" type="text/javascript"></script>
</head>
<body>
<div id="google_map_viewer"></div>
<script type="text/javascript">
//<![CDATA[
var hauteur = '400px';
var largeur = '400px';
document.getElementById("google_map_viewer").style.width = largeur;
document.getElementById("google_map_viewer").style.height= hauteur;
var map;
var geoXml = new GGeoXml("http://www.laurentgeffroy.com/params/GoogleMaps/5dfbdc88-d9f2-411f-a92d-e9f338ec0d93.kml");
function GoogleMarkerLoader()
{
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("google_map_viewer"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// Centre au milieu de la France
var point = new GLatLng(47.129951,0.878906);
map.setCenter(point, 6);
map.addOverlay(geoXml);
}
}
setTimeout("GoogleMarkerLoader()", 1000);
//]]>
</script>
</body>
</html>