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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
| <html>
<script src="http://maps.google.com/maps?file=api&v=2&key=Ici ma clef API" type="text/javascript" charset="utf-8"></script> <body onload="onLoad()">
<script type="text/javascript" charset="utf-8">
//<![CDATA[
/*************************************************
* Created with GoogleMapAPI 2.2
* Author: Monte Ohrt <monte AT ohrt DOT com>
* Copyright 2005-2006 New Digital Group
* http://www.phpinsider.com/php/code/GoogleMapAPI/
*************************************************/
var points = [];
var markers = [];
var counter = 0;
var to_htmls = [];
var from_htmls = [];
var map = null;
function onLoad() {
if (GBrowserIsCompatible()) {
var mapObj = document.getElementById("map");
if (mapObj != "undefined" && mapObj != null) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(50.6330986, 3.0533023), 16, G_NORMAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
var point = new GLatLng(50.6330986,3.0533023);
var marker = createMarker(point,"rue nationale lille france","<div id=\"gmapmarker\">rue nationale lille france</div>", 0);
map.addOverlay(marker);
}
} else {
alert("Sorry, the Google Maps API is not compatible with this browser.");
}
}
function createMarker(point, title, html, n) {
if(n >= 0) { n = -1; }
var marker = new GMarker(point);
var tabFlag = isArray(html);
if(!tabFlag) { html = [{"contentElem": html}]; }
to_htmls[counter] = html[0].contentElem + '<p /><form class="gmapDir" id="gmapDirTo" style="white-space: nowrap;" action="http://maps.google.com/maps" method="get" target="_blank">' +
'<span class="gmapDirHead" id="gmapDirHeadTo">Directions: <strong>To here</strong> - <a href="javascript:fromhere(' + counter + ')">From here</a></span>' +
'<p class="gmapDirItem" id="gmapDirItemTo"><label for="gmapDirSaddr" class="gmapDirLabel" id="gmapDirLabelTo">Start address: (include addr, city st/region)<br /></label>' +
'<input type="text" size="40" maxlength="40" name="saddr" class="gmapTextBox" id="gmapDirSaddr" value="" onfocus="this.style.backgroundColor = \'#e0e0e0\';" onblur="this.style.backgroundColor = \'#ffffff\';" />' +
'<span class="gmapDirBtns" id="gmapDirBtnsTo"><input value="Get Directions" type="submit" class="gmapDirButton" id="gmapDirButtonTo" /></span></p>' +
'<input type="hidden" name="daddr" value="' +
point.y + ',' + point.x + "(" + title.replace(new RegExp(/"/g),'"') + ")" + '" /></form>';
from_htmls[counter] = html[0].contentElem + '<p /><form class="gmapDir" id="gmapDirFrom" style="white-space: nowrap;" action="http://maps.google.com/maps" method="get" target="_blank">' +
'<span class="gmapDirHead" id="gmapDirHeadFrom">Directions: <a href="javascript:tohere(' + counter + ')">To here</a> - <strong>From here</strong></span>' +
'<p class="gmapDirItem" id="gmapDirItemFrom"><label for="gmapDirSaddr" class="gmapDirLabel" id="gmapDirLabelFrom">End address: (include addr, city st/region)<br /></label>' +
'<input type="text" size="40" maxlength="40" name="saddr" class="gmapTextBox" id="gmapDirSaddr" value="" onfocus="this.style.backgroundColor = \'#e0e0e0\';" onblur="this.style.backgroundColor = \'#ffffff\';" />' +
'<span class="gmapDirBtns" id="gmapDirBtnsFrom"><input value="Get Directions" type="submit" class="gmapDirButton" id="gmapDirButtonFrom" /></span></p' +
'<input type="hidden" name="daddr" value="' +
point.y + ',' + point.x + "(" + title.replace(new RegExp(/"/g),'"') + ")" + '" /></form>';
html[0].contentElem = html[0].contentElem + '<p /><div id="gmapDirHead" class="gmapDir" style="white-space: nowrap;">Directions: <a href="javascript:tohere(' + counter + ')">To here</a> - <a href="javascript:fromhere(' + counter + ')">From here</a></div>';
if(!tabFlag) { html = html[0].contentElem; }if(isArray(html)) { GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml(html); }); }
else { GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }
points[counter] = point;
markers[counter] = marker;
counter++;
return marker;
}
function isArray(a) {return isObject(a) && a.constructor == Array;}
function isObject(a) {return (a && typeof a == 'object') || isFunction(a);}
function isFunction(a) {return typeof a == 'function';}
function showInfoWindow(idx,html) {
map.centerAtLatLng(points[idx]);
markers[idx].openInfoWindowHtml(html);
}
function tohere(idx) {
markers[idx].openInfoWindowHtml(to_htmls[idx]);
}
function fromhere(idx) {
markers[idx].openInfoWindowHtml(from_htmls[idx]);
}
//]]>
</script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
if (GBrowserIsCompatible()) {
document.write('<div id="map" style="width: 1000px; height: 600px"></div>');
} else {
document.write('<b>Javascript must be enabled in order to use Google Maps.</b>');
}
//]]>
</script>
<noscript><b>Javascript must be enabled in order to use Google Maps.</b></noscript>
</html> |
Partager