Home/ Questions/Q 6623985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T21:35:53+00:00

I have never worked with Google maps API. For the school project I am

  • 0

I have never worked with Google maps API.

For the school project I am working on; I need to get a direction between two locations (this is easy part and I think I can do this),

However I also need to put an X mark; at every 10 miles along the way.

Is this even possible?

Thank You.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, here’s a working solution that draws markers every 200 miles (I was working on big distances to check it worked on geodesic curved lines, which it does). To make this work for you, just change all the coordinates, and change 200 to 10

    <!DOCTYPE html>
<html>
<head>
<title>lines with markers every x miles</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!--- need to load the geometry library for calculating distances, see http://www.svennerberg.com/2011/04/calculating-distances-and-areas-in-google-maps-api-3/ --->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>

<script type="text/javascript"> 
    function initialize() {
        var startLatlng = new google.maps.LatLng(54.42838,-2.9623);
        var endLatLng = new google.maps.LatLng(52.908902,49.716793);

        var myOptions = {
            zoom: 4,
            center: new google.maps.LatLng(51.399206,18.457031),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var startMarker = new google.maps.Marker({
            position: startLatlng, 
            map: map
        });

        var endMarker = new google.maps.Marker({
            position: endLatLng, 
            map: map
        });

        // draw a line between the points
        var line = new google.maps.Polyline({
            path: [startLatlng, endLatLng],
            strokeColor: "##FF0000",
            strokeOpacity: 0.5,
            strokeWeight: 4,
            geodesic: true,
            map: map
        });

        // what's the distance between these two markers?
        var distance = google.maps.geometry.spherical.computeDistanceBetween(
            startLatlng, 
            endLatLng
        );

        // 200 miles in meters
        var markerDistance = 200 * 1609.344;

        var drawMarkers = true;

        var newLatLng = startLatlng;

        // stop as soon as we've gone beyond the end point 
        while (drawMarkers == true) {
            // what's the 'heading' between them?
            var heading = google.maps.geometry.spherical.computeHeading(
                newLatLng, 
                endLatLng
            );

            // get the latlng X miles from the starting point along this heading
             var newLatLng = google.maps.geometry.spherical.computeOffset(
                newLatLng,
                markerDistance, 
                heading
            );

            // draw a marker
            var newMarker = new google.maps.Marker({
                position: newLatLng, 
                map: map
            });

            // calculate the distance between our new marker and the end marker
            var newDistance = google.maps.geometry.spherical.computeDistanceBetween(
                newLatLng, 
                endLatLng
            );

            if (newDistance <= markerDistance) {
                drawMarkers = false;
            }
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="map_canvas"></div>
</body>
</html>
    • 0