Jump to content



Photo

google map API


  • Please log in to reply
1 reply to this topic

#1 Craig Hopson

Craig Hopson

    Neowinian

  • Joined: 17-November 12
  • Location: London
  • OS: Windows 8 :-(

Posted 18 November 2012 - 18:02

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 things

1......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'])


#2 OP Craig Hopson

Craig Hopson

    Neowinian

  • Joined: 17-November 12
  • Location: London
  • OS: Windows 8 :-(

Posted 18 November 2012 - 20:19

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>




Click here to login or here to register to remove this ad, it's free!