Home/ Questions/Q 1008997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:51:30+00:00

I was wondering if anyone has any ideas/tutorials on how to plot various points

  • 0

I was wondering if anyone has any ideas/tutorials on how to plot various points on a google map, and save the points in a database with custom marker titles.

I want something similar to http://www.mapmyrun.com/create_new , where i can actually draw on a map and mark out paths and such.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Plotting the points is done in Javascript, I managed to learn everything I needed from the maps API docs:
    http://code.google.com/apis/maps/documentation/javascript/basics.html

    I scraped the code below off a site I made which moves a single point to where the mouse is clicked. You should be able to store a set of points in a JS array, or better, get them from the map when submitting your form then update a hidden form field with the values which can be inserted in your database with a php/python script on the server.

    <html>
  <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:400px; height:600px; display:block; float:left">
    </div>
  </body>
</html>
<script type="text/javascript">
var map;
var marker = null;

function initialize() {
  var myLatlng = new google.maps.LatLng(54, -2.0);
  var myOptions = {
    zoom: 6,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);

  if(marker == null){
    marker = new google.maps.Marker({
      position: location, 
      map: map
    });
  }else{
    marker.setPosition(location);
  }
  map.setCenter(location);
}
</script>

    Edit:
    Here is a demo from docs site, which creates a list of points and draws a lines between them:
    http://code.google.com/apis/maps/documentation/javascript/examples/polyline-simple.html
    There are other examples there too. Just load them and press ctrl+u in firefox to view the source.

    • 0