Home/ Questions/Q 6580943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:05:27+00:00

I need to create a google maps web application, where I can import a

  • 0

I need to create a google maps web application, where I can import a GPX file to show the route visually as an overlay on the map. After the import I want the result to look like this!

How do I do this. I’am using python django

Hope someone can help

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I can’t help with the GPX/python/django side of things. However if you can presumably get a set of data with latitude and longitudes for all the points along your route, this code will create the route for you.

    <!DOCTYPE html>
<html>
<head>
<title>Draw a polyline given many coordinates</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>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>

<script>
    function initialize() {
        var homeLatlng = new google.maps.LatLng(51.476706,0);
        var myOptions = {
            zoom: 15,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        // create an array of coordinates
        var arrCoords = [
            new google.maps.LatLng(51.482238,0.001581),
            new google.maps.LatLng(51.473364,0.011966),
            new google.maps.LatLng(51.471974,-0.000651),
            new google.maps.LatLng(51.472108,-0.002196),
            new google.maps.LatLng(51.474995,-0.003827),
            new google.maps.LatLng(51.476492,-0.005629),
            new google.maps.LatLng(51.477855,-0.006058),
            new google.maps.LatLng(51.478443,-0.007045),
            new google.maps.LatLng(51.479298,-0.007861),
            new google.maps.LatLng(51.481202,-0.002136),
            new google.maps.LatLng(51.481577,-0.0022)
        ];

        // draw the route on the map            
        var route = new google.maps.Polyline({
            path: arrCoords,
            strokeColor: "#00FF00",
            strokeOpacity: 1.0,
            strokeWeight: 4,
            geodesic: false,
            map: map
        }); 
    }

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