• 0

google map API

Asked by Craig Hopson,

 Share

Question

Collaborator

Craig Hopson

Posted
Posted

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="https://maps.google.com/maps/api/js?sensor=false"></script> -->
   <script src="https://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>
[/CODE]

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

Link to comment
https://www.neowin.net/forum/topic/1120438-google-map-api/
Share on other sites

1 answer to this question

Recommended Posts

  • 0
Collaborator

Craig Hopson

Posted
  • Author
Posted

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="https://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>
[/CODE]

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Classic Outlook vs New Outlook — Which one do you prefer and why?

      By _neutrino · Posted

      Classic themes are just the colors on the bar like the olden days, if you use the image themes, it does fancy transparent backgrounds and it makes the elements of the app look like they are transparent bubbles. This sample image shows what it looks like.  
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By richstad · Posted

      Good point, unfortunately. NextDNS has far more filters and workarounds than uBlock, and it's easy to implement.
    • Windows 10 KB5094127 Patch Tuesday improves File Explorer search and more

      By TarasBuria · Posted

      Windows 10 KB5094127 Patch Tuesday improves File Explorer search and more by Taras Buria The June 2026 Patch Tuesday updates are here, bringing mandatory patches to users with PCs enrolled in the Extended Security Update program for Windows 10. Microsoft is rolling out KB5094127, with build numbers 19045.7417 and 19044.7417. Changelog includes the following: [File Explorer] This update improves File Explorer search, including support for Chinese text, and UTF 8–encoded files without a byte order mark (BOM). Text now displays more clearly and consistently across search results, Content view, and tooltips. [Secure Boot] This update enables dynamic status reporting for Secure Boot states in Windows Security App. This update adds a new policy setting, LimitSecureBootRequiredServiceData, under Computer Configuration > Administrative Templates > Windows Components > Secure Boot. When this setting is enabled, Windows limits the Secure Boot service data it sends by suppressing the event normally sent to Microsoft. This policy is also included in the Windows Restricted Traffic Limited Functionality Baseline package. For information about the policy, see Manage connections from Windows 10 and Windows 11 operating system components to Microsoft services. With this update, Windows quality updates include additional high confidence device targeting data, increasing coverage of devices eligible to automatically receive new Secure Boot certificates. Devices receive the new certificates only after demonstrating sufficient successful update signals, maintaining a controlled and phased rollout. As for known bugs, Microsoft has the following to say: A workaround is available in the official documentation. Today's updates are available for PCs enrolled in the Extended Security Updates program only. If your PC is eligible, you can download the update from Settings > Windows Update or from the Microsoft Update Catalog here.
    • Signal accuses UK government of using child safety as cover for mass surveillance

      By Lamp Post · Posted

      Then the solution is to not let children have easy access to smart phones or internet until they are older, not mass surveillance. Only this would require parents to do actual parenting, most likely, as with any good solution to the problem.
    • Windows 11 KB5094126 June 2026 Patch Tuesday update now available to download

      By SidVicious · Posted

      "Microsoft says there are no known issues." I give them one day.

  • Recent Achievements

    • Week One Done
      rubentuben8 earned a badge
      Week One Done
    • Week One Done
      ARaclen earned a badge
      Week One Done
    • One Year In
      jojodbn earned a badge
      One Year In
    • One Month Later
      jojodbn earned a badge
      One Month Later
    • Week One Done
      jojodbn earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      520
    2. 2
      PsYcHoKiLLa
      230
    3. 3
      +Edouard
      120
    4. 4
      ATLien_0
      87
    5. 5
      Steven P.
      83
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!