30
Jul/11
0

Geolocation mit Mootools, Google Map

Auf der Suche nach einem geeigneten Weg eine Route in Google Map von derjenigen Person welche die Seite besucht zu einem bestimmten Punkt zu zeichnen bin ich, im Zusammenhang mit Mootools, auf MooGeo gestossen.

Meine Aufgabe war recht schlicht, eine Google Map in Contao einzufügen, welche eine Route von der Geolocation des Seitenbesuchers zum einem bestimmten Ziel zeichnet. Da Mootools in Contao schon mitgeliefert wird, habe ich eine Erweiterung gesucht, welche Mootools um Geolocation Features erweitert. Dabei bin ich auf MooGeo gestossen, eine einfach zu nutzende Erweiterung des Mootools Frameworks.

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
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="tl_files/MooGeo-yui-compressed.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
// Configuration
mapdiv = 'mapdiv';
latdestination = 47;
londestination = 8;
// Desination Coordinates
var destination = new google.maps.LatLng(latdestination, londestination);
// Map options
myOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: destination
}
// Create map
var map = new google.maps.Map(document.id(mapdiv), myOptions);
// Marker for desination
new google.maps.Marker({
position: destination,
map: map
});
// Get user coordinates
new MooGeo('visitor',
{
onComplete: function(location)
{
// Origin
origin = new google.maps.LatLng(
location.place.centroid.latitude,
location.place.centroid.longitude
);
// Initialize direction services
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
// Route options
route = {
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
// Create route
directionsService.route(route, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
});
});
//--><!]]>
</script>

Zurück

Einen Kommentar schreiben