• 0

google map API


Question

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

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('.$rowtitude'].', '.$row['longitude'].'),';
}
?>
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP };
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvasapOptions);
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('.$rowtitude'].', '.$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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Time to find another tech news site I think. This is beyond ridiculous.
    • Microsoft Store is getting improved recommendations, deeper Windows integration, and more by Taras Buria Microsoft announced several new features coming to the Microsoft Store on Windows 11. The company revealed that 250 million customers use the Microsoft Store each month. With the latest updates, Microsoft is improving the experience with better recommendations, search improvements, deeper Windows integration, Copilot, and more. The store's Home Page is getting personalized recommendations with suggestions based on your recent activities, what is trending in your region, and the recent deals. Microsoft says this change will bring more meaningful and relevant content. Search is getting smarter, and it now uses additional information when ranking apps. It is "intent-aware," and considers additional aspects like app updates, ratings, language-specific nuances, and more. In the United States, the Microsoft Store now has a Copilot button at the bottom of the screen. Clicking it lets you ask questions about an app or game, or compare two products. Speaking of Copilot, apps with AI-powered experiences now have a badge indicating that certain apps work better on Copilot+ PCs. Other changes to the Microsoft Store include a new Discover More section with related apps and deeper Windows integration. The latter lets you find apps in the Microsoft Store using Windows Search, and the "Open With" dialog now includes additional recommendations from the Microsoft Store. Finally, Microsoft made multiple under-the-hood improvements to boost performance (the app launches twice as fast as it did six months ago) and improve installation reliability. In addition to new features coming to the Microsoft Store, the company reminded users that some popular productivity apps are now available in the Store. They include Notion, Perplexity, Docker, and Day One. You can read more about all those changes in a post on the official Windows Blogs website. Last month, at Build 2025, Microsoft announced more improvements for the Microsoft Store, so stay tuned for those.
    • OpenAI exposes secret propaganda campaigns tied to multiple countries by David Uzondu Back in February, OpenAI shut down accounts that were busy developing Chinese surveillance tools aimed at the West. These tools were designed to snoop on social media, look for anti-China sentiment and protests, and report back to Chinese authorities. Now, OpenAI has announced it has disrupted even more shady operations, and not just those tied to China. In a report released Thursday, the company detailed how it recently dismantled ten different operations that were misusing its artificial intelligence tools. One of the China-linked groups, which OpenAI called "Sneer Review," used ChatGPT to churn out short comments for sites like TikTok, X, and Facebook. The topics varied, from U.S. politics to criticism of a Taiwanese game, where players work against the Chinese Communist Party. This operation even generated posts and then replied to its own posts to fake real discussions. What is particularly interesting is that the group also used ChatGPT to write internal performance reviews, describing how well they were running their influence campaign. Another operation with ties to China involved individuals posing as journalists and geopolitical analysts. They used ChatGPT to write social media posts and biographies for their fake accounts on X, translate messages from Chinese to English, and analyze data. OpenAI mentioned that this group even analyzed correspondence addressed to a U.S. Senator. On top of that, these actors used OpenAI's models to create marketing materials, basically advertising their services for running fake social media campaigns and recruiting intelligence sources. OpenAI also disrupted operations, probably originating in Russia and Iran. There was also a spam operation from a marketing company in the Philippines, a recruitment scam linked to Cambodia, and a deceptive job campaign that looked like something North Korea might orchestrate. Ben Nimmo, from OpenAI's intelligence team, noted the wide range of tactics and platforms these groups are using. However, he also said these operations were mostly caught early and did not manage to fool large numbers of real people. According to Nimmo, "We didn't generally see these operations getting more engagement because of their use of AI. For these operations, better tools don't necessarily mean better outcomes."
    • Long ago, I was in a networking class on a lab computer. The guy next to sarcastically told me to SHIFT+DELETE the C:\Windows folder. I said that I was sure Windows wouldn't allow such a thing (Windows 2000), and would either totally block the action or give some kind of dire warning. I was so confident that I tried it...not only was I wrong, but it didn't even give the standard "are you sure" warning, just went to town. I pressed cancel as quick as I could, but it was too late, shortly after, the system blue-screened and never booted again. I had to stay late and reinstall Windows for the teacher, but that ended up being a good thing, had great repour with him for the rest of the year, even got to help him get Active Directory setup in his lab.
  • Recent Achievements

    • One Year In
      survivor303 earned a badge
      One Year In
    • Week One Done
      jbatch earned a badge
      Week One Done
    • First Post
      Yianis earned a badge
      First Post
    • Rookie
      GTRoberts went up a rank
      Rookie
    • First Post
      James courage Tabla earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      419
    2. 2
      snowy owl
      182
    3. 3
      +FloatingFatMan
      182
    4. 4
      ATLien_0
      176
    5. 5
      Xenon
      137
  • Tell a friend

    Love Neowin? Tell a friend!