Email:   Password:   
Inscris-toi sur le site pour profiter de plus de fonctionalités   

Photo au hasard

Skatepark
Skatepark
11110

Recherche


Evénements

<- October ->
Lun Mar Mer Jeu Ven Sam Dim
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

Spottrotters sur votre blog, un cas concret


Rédigé par Fanfoue,
Publié le Saturday 10 March 2007.


Passons maintenant à un cas concret de création d'une GoogleMap sur un site distant.

Cliquez ici pour voir le résultat.

Voici le code source de la page, libre à vous de le modifier pour afficher les infos tel que vous le souhaitez:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>SpotTrotters.com: Sports de Glisse et Sports extr&ecirc;mes &agrave; travers le monde</title>

<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAh_Z_OMQUe5N_dWAz7HiMnhTDczuQVnstt_JKJ0XiIXvquCC31RS9NMNERTJFphrqrXWRudZKMz-nHg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var allpoints = [];
var poly=[];
_mSvgEnabled = false;
_mSvgForced = false;

function load() {
map = new GMap2(document.getElementById("gmap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(47.43974267063464, -2.099987268447876), 5);

var spotsicon = new GIcon();
spotsicon.image = "http://www.spottrotters.com/themes/default/img/gmaps/marker_yellow.png";
spotsicon.shadow = "http://www.spottrotters.com/themes/default/img/gmaps/marker_shadow.png";
spotsicon.iconSize = new GSize(12, 20);
spotsicon.shadowSize = new GSize(22, 20);
spotsicon.iconAnchor = new GPoint(6, 20);
spotsicon.infoWindowAnchor = new GPoint(5, 1);

var businessesicon = new GIcon();
businessesicon.image = "http://www.spottrotters.com/themes/default/img/gmaps/marker_blue.png";
businessesicon.shadow = "http://www.spottrotters.com/themes/default/img/gmaps/marker_shadow.png";
businessesicon.iconSize = new GSize(12, 20);
businessesicon.shadowSize = new GSize(22, 20);
businessesicon.iconAnchor = new GPoint(6, 20);
businessesicon.infoWindowAnchor = new GPoint(5, 1);

var usersicon = new GIcon();
usersicon.image = "http://www.spottrotters.com/themes/default/img/gmaps/marker_green.png";
usersicon.shadow = "http://www.spottrotters.com/themes/default/img/gmaps/marker_shadow.png";
usersicon.iconSize = new GSize(12, 20);
usersicon.shadowSize = new GSize(22, 20);
usersicon.iconAnchor = new GPoint(6, 20);
usersicon.infoWindowAnchor = new GPoint(5, 1);

var fdata = "http://www.spottrotters.com/spot4.xml";
nReq = location.search.substring(1,location.search.length)
nReq = nReq.split("&");
nomVariable = nReq[0].substring(0, nReq[0].indexOf("="));
nomValeur = nReq[0].substring(nReq[0].indexOf("=")+1, nReq[0].length);
if ( nomVariable == "fdata" ) {
fdata = nomValeur;
}
GDownloadUrl(fdata, function(data, responseCode) {
var xml = GXml.parse(data);
var lines = xml.documentElement.getElementsByTagName("line");

var markers = xml.documentElement.getElementsByTagName("markers");
for (var i = 0; i < markers.length; i++) {
var mark_points = markers[i].getElementsByTagName("point");
for ( var j = 0 ; j < mark_points.length ; j++ ) {
if ( mark_points[j].getAttribute("name") != "" && mark_points[j].getAttribute("name") != null ) {
if ( mark_points[j].getAttribute("type") == "spot") {
var mark_tmppoint = new GLatLng(parseFloat(mark_points[j].getAttribute("lat")),parseFloat(mark_points[j].getAttribute("lng")));
allpoints.push(mark_tmppoint);
createMarker(mark_tmppoint,mark_points[j].getAttribute("name"), spotsicon);
} else if ( mark_points[j].getAttribute("type") == "business") {
var mark_tmppoint = new GLatLng(parseFloat(mark_points[j].getAttribute("lat")),parseFloat(mark_points[j].getAttribute("lng")));
allpoints.push(mark_tmppoint);
createMarker(mark_tmppoint,mark_points[j].getAttribute("name"), businessesicon);
}
else {
var mark_tmppoint = new GLatLng(parseFloat(mark_points[j].getAttribute("lat")),parseFloat(mark_points[j].getAttribute("lng")));
allpoints.push(mark_tmppoint);
createMarker(mark_tmppoint,mark_points[j].getAttribute("name"), usersicon);
}
} else {
GLog.write(mark_points[j].textContent);
if ( mark_points[j].textContent != "" && mark_points[j].textContent != null) {
var mark_tmppoint = new GLatLng(parseFloat(mark_points[j].getAttribute("lat")),parseFloat(mark_points[j].getAttribute("lng")));
allpoints.push(mark_tmppoint);
createMarker(mark_tmppoint,mark_points[j].textContent, spotsicon);
} else {
}
}
}
}
fit();
});
}

function createMarker(point,html, icon) {
var marker = new GMarker(point, icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

function fit() {
var bounds = new GLatLngBounds();
for(var i = 0 ; i < allpoints.length ; i++ ) {
bounds.extend( allpoints[i] );
}
//GLog.write(allpoints.length + " points");
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
//GLog.write( "bounds:" + bounds.getCenter().lat() + " " + bounds.getCenter().lng() );
//GLog.write( "map:" + map.getCenter().lat() + " " + map.getCenter().lng() );
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="gmap" style="width: 600px; height: 350px; float:left;"></div>
</body>
</html>

Pensez à adapter la clef GMAPS et à changer le fichier XML selon vos envies.

Cliquez ici pour voir le résultat.
Note: le code source de cette page provient du site http://clementcadbury.free.fr/maps/

< Précédent
 

Creative Commons License
Lafraise.com, éditeur de bien jolis T-shirts. Valid XHTML 1.0 Transitional Valid CSS 2.0 Téléchargez Firefox Ubuntu Linux News RSS 2.0 XML Sitemap
Sauf mention contraire, le contenu de ce site est sous contrat Creative Commons.