CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3maps
user3421068
user3421068

Reputation: 1

How to draw arbitrary shapes on google maps?

I want to use something like mouse hover or move on Google Maps. How can I draw a shape that I want but not a geometric one. I want it like ,when the mouse is clicked, it should draw(non-linear line) and when mouse is again clicked, drawing should end and a shape bounded closed area should be displayed. Is it possible? Maybe with coordinates?

Upvotes: 0

Views: 297

Answers (1)

rbrundritt
rbrundritt

Reputation: 17954

I don't have an example for Google Maps, but here is one that I created for Bing Maps:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Event mouse down</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
      var map, isDrawing, line;  

      function getMap()
      {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'YOUR_BING_MAPS_KEY'});

        Microsoft.Maps.Events.addHandler(map, 'mousedown', startDrawing);
        Microsoft.Maps.Events.addHandler(map, 'mouseup', stopDrawing);
        Microsoft.Maps.Events.addHandler(map, 'mousemove', mouseMoved);
      }

      function startDrawing(e)
      {
        try{        
            var point = new Microsoft.Maps.Point(e.getX(), e.getY());
            var loc = e.target.tryPixelToLocation(point);

            line = new Microsoft.Maps.Polyline([loc, loc]);

            map.entities.push(line);

            isDrawing = true;
            map.setOptions({disablePanning: true, disableZooming: true});
        }catch(x){}
      }

      function mouseMoved(e)
      {
        if(isDrawing){
            try{
                var point = new Microsoft.Maps.Point(e.getX(), e.getY());
                var loc = e.target.tryPixelToLocation(point);
                var locs = line.getLocations();
                locs.push(loc);
                line.setLocations(locs);
            }catch(x){}
        }
      }

      function stopDrawing()
      {
        isDrawing = false;
        map.setOptions({disablePanning: false, disableZooming: false});
      }
      </script>
   </head>
   <body onload="getMap();">
      <div id='myMap' style="position:relative; width:1000px; height:800px;"></div>
   </body>
</html>

Upvotes: 0

Related Questions