Google maps api - snap marker to nearest road

Question

I'm trying to snap coordinate to nearest road. But still I can't do that in simple way. This is simple code, how to improve it that result would be marker on the road:

<!DOCTYPE html>
<html>
<head>
<title>Map</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: 300px; width:600px }
</style>

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

<script type="text/javascript">
    function initialize() {
        var homeLatlng = new google.maps.LatLng(24.696554,-81.328238);

        var myOptions = {
            zoom: 15,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        var image = new google.maps.MarkerImage(
            'http://maps.google.com/mapfiles/ms/micons/green-dot.png',
            new google.maps.Size(32, 32),   // size
            new google.maps.Point(0,0), // origin
            new google.maps.Point(16, 32)   // anchor
        );

        var shadow = new google.maps.MarkerImage(
            'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
            new google.maps.Size(59, 32),   // size
            new google.maps.Point(0,0), // origin
            new google.maps.Point(16, 32)   // anchor
        );

        var homeMarker = new google.maps.Marker({
            position: homeLatlng, 
            map: map,
            title: "Check this cool location",
            icon: image,
            shadow: shadow
        });
    }

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

I would like to get idea for easiest method. Thanks for any help.

geocodezip · Accepted Answer · 2013-05-22T16:37:04.727

4

Use the directions service. Get driving directions from the point of interest to the point of interest. Should be on the road.

var directionsService = new google.maps.DirectionsService();

directionsService.route({origin:homeLatlng, destination:homeLatlng, travelMode: google.maps.DirectionsTravelMode.DRIVING}, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK)
  {
    var homeMarker = new google.maps.Marker({
      position: response.routes[0].legs[0].start_location, 
      map: map,
      title: "Check this cool location",
      icon: image,
      shadow: shadow
    });
  } else {
    var homeMarker = new google.maps.Marker({
      position: homeLatlng,
      map: map,
      title: "Check this cool location",
      icon: image,
      shadow: shadow
    });
  }
});

example

edited May 22 '13 at 16:37

answered May 22 '13 at 16:15

geocodezip

158,664
13
220
245

Thank you. I think everything will be clear with full example. Thanks again. – wahas May 22 '13 at 17:03
I added my updated code. It should work, but markers are not showing. Before I put directionsService.route({... part it worked well. Where am I doing wrong? – wahas May 23 '13 at 18:19
The PHP is not useful. What does view source in the browser show you? Your original question and the code I provided was for a single point. Are you trying to use it for multiple points? The DirectionsService is asynchronous and subject to a rate limit and a quota, that will need to be accounted for if it is being used for multiple points (and it won't work at all for _lots_ of points). – geocodezip May 23 '13 at 18:25
I'm using to display units locations on the map. Yes it's more than one point, from 2 to ~10. Locations updates every 5 seconds. It seems that I have problem and it will not work for several points. (P.S. I modified code a little bit without php). What advise would be to attache points to nearest roads (each separately) – wahas May 23 '13 at 18:37
You need to create a new question. The answer to this one (for a single point) won't apply. – geocodezip May 23 '13 at 18:40

Google maps api - snap marker to nearest road

1 Answers1

Linked