Craig Hopson Posted November 18, 2012 Share Posted November 18, 2012 hi guys been using this code <!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps - Moving point along a path</title> <!--<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> --> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyC9drFQnsmuob_bO9wFITHv-5K2pM-lgD0" type="text/javascript"></script></head><body onunload="GUnload()"> <div id="map_canvas" style="width: 1000px; height: 800px;"></div> <script type="text/javascript"> Number.prototype.toRad = function() { return this * Math.PI / 180; } Number.prototype.toDeg = function() { return this * 180 / Math.PI; } GLatLng.prototype.moveTowards = function(point, distance) { var lat1 = this.lat().toRad(); var lon1 = this.lng().toRad(); var lat2 = point.lat().toRad(); var lon2 = point.lng().toRad(); var dLon = (point.lng() - this.lng()).toRad(); // Find the bearing from this point to the next. var brng = Math.atan2(Math.sin(dLon) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon)); var angDist = distance / 6371000; // Earth's radius. // Calculate the destination point, given the source and bearing. lat2 = Math.asin(Math.sin(lat1) * Math.cos(angDist) + Math.cos(lat1) * Math.sin(angDist) * Math.cos(brng)); lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(angDist) * Math.cos(lat1), Math.cos(angDist) - Math.sin(lat1) * Math.sin(lat2)); if (isNaN(lat2) || isNaN(lon2)) return null; return new GLatLng(lat2.toDeg(), lon2.toDeg()); } function moveAlongPath(points, distance, index) { index = index || 0; // Set index to 0 by default. if (index < points.length) { // There is still at least one point further from this point. // Construct a GPolyline to use the getLength() method. var polyline = new GPolyline([points[index], points[index + 1]]); // Get the distance from this point to the next point in the polyline. var distanceToNextPoint = polyline.getLength(); if (distance <= distanceToNextPoint) { // distanceToNextPoint is within this point and the next. // Return the destination point with moveTowards(). return points[index].moveTowards(points[index + 1], distance); } else { // The destination is further from the next point. Subtract // distanceToNextPoint from distance and continue recursively. return moveAlongPath(points, distance - distanceToNextPoint, index + 1); } } else { // There are no further points. The distance exceeds the length // of the full path. Return null. return null; } } var map = new GMap2(document.getElementById('map_canvas')); var points = [ <? $result = mysql_query("SELECT * FROM location ORDER BY id DESC LIMIT 50");while($row = mysql_fetch_array($result)){echo 'new GLatLng('.$row['latitude'].', '.$row['longitude'].'),'; }?> ]; var polyline = new GPolyline(points, '#f00', 6); var nextMarkerAt = 0; // Counter for the marker checkpoints. var nextPoint = null; // The point where to place the next marker. map.setCenter(new GLatLng(51.5589503 ,0.1462796), 12); // Draw the path on the map. map.addOverlay(polyline); // Draw the checkpoint markers every 1000 meters. while (true) { // Call moveAlongPath which will return the GLatLng with the next // marker on the path. nextPoint = moveAlongPath(points, nextMarkerAt); if (nextPoint) { // Draw the marker on the map. map.addOverlay(new GMarker(nextPoint)); // Add +1000 meters for the next checkpoint. nextMarkerAt += 10000; } else { // moveAlongPath returned null, so there are no more check points. break; } } </script></body></html> to display a map with a route on it i need to change a few things1......Only have markers where there are GEO locations()2......I want to be able to click the markers or hover and get more information like time (stored in database with $row['latitude'] and $row['longitude']) Link to comment Share on other sites More sharing options...
Craig Hopson Posted November 18, 2012 Author Share Posted November 18, 2012 ok i got it <!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps - Moving point along a path</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script></head><body onunload="GUnload()"> <div id="map_canvas" style="width: 1000px; height: 800px;"></div> <script type="text/javascript"> var map; var mapOptions = { center: <?php $result = mysql_query("SELECT * FROM location ORDER BY id DESC LIMIT 1");while($row = mysql_fetch_array($result)){echo 'new google.maps.LatLng('.$row['latitude'].', '.$row['longitude'].'),';}?> zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }; function initialize() { map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);var userCoor = [ <?php $result = mysql_query("SELECT * FROM location ORDER BY id DESC LIMIT 30");while($row = mysql_fetch_array($result)){echo '["'.$row['id'].'<br>'.$row['time'].'",'.$row['latitude'].', '.$row['longitude'].'],';} ?> ];var userCoorPath = [ <?php $result = mysql_query("SELECT * FROM location ORDER BY id LIMIT 30");while($row = mysql_fetch_array($result)){echo 'new google.maps.LatLng('.$row['latitude'].', '.$row['longitude'].'),';} ?> ]var userCoordinate = new google.maps.Polyline({path: userCoorPath,strokeColor: "#FF0000",strokeOpacity: 1,strokeWeight: 2});userCoordinate.setMap(map);var infowindow = new google.maps.InfoWindow();var marker, i;for (i = 0; i < userCoor.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]), map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(userCoor[i][0]); infowindow.open(map, marker); } })(marker, i));} } google.maps.event.addDomListener(window, 'load', initialize); </script></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now