#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    6
    Rep Power
    0

    Draw Polygon on map


    Just getting started with JavaScript. I found an example of a script which uses the 'google.maps.geometry.poly.containsLocation' API. I want to change it to actually draw the polygon on the map.

    Trying to figure out where to insert the code to draw the poly on the map. The poly draw example I found uses the following code

    SectorA2.setMap(map);

    Not sure where to insert this line?

    Here is the working HTML



    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Polygon arrays</title>
        <style>
          html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false"></script>
        <script>
    
    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(38.8572,-90.30942),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      };
    
      var map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
    
      var SectorA2;
    
      var SectorA2Coords = [
        new google.maps.LatLng(38.8572,-90.30942),
        new google.maps.LatLng(38.86366,-90.312174),
        new google.maps.LatLng(38.86862,-90.3101),
        new google.maps.LatLng(38.86861,-90.31181),
        new google.maps.LatLng(38.86867,-90.31294),
        new google.maps.LatLng(38.86874,-90.31366),
        new google.maps.LatLng(38.86894,-90.31439),
        new google.maps.LatLng(38.86906,-90.31564),
        new google.maps.LatLng(38.86931,-90.3168),
        new google.maps.LatLng(38.8696,-90.3195),
        new google.maps.LatLng(38.86957,-90.32016),
        new google.maps.LatLng(38.86975,-90.32137),
        new google.maps.LatLng(38.8703,-90.32652),
        new google.maps.LatLng(38.8709,-90.32817),
        new google.maps.LatLng(38.87126,-90.32912),
        new google.maps.LatLng(38.87155,-90.33003),
        new google.maps.LatLng(38.87177,-90.33081),
        new google.maps.LatLng(38.87177,-90.33113),
        new google.maps.LatLng(38.87215,-90.33206),
        new google.maps.LatLng(38.87213,-90.33267),
        new google.maps.LatLng(38.87198,-90.33299),
        new google.maps.LatLng(38.87169,-90.33336),
        new google.maps.LatLng(38.87134,-90.33368),
        new google.maps.LatLng(38.87102,-90.33389),
        new google.maps.LatLng(38.87076,-90.33426),
        new google.maps.LatLng(38.87038,-90.33485),
        new google.maps.LatLng(38.87004,-90.33659),
        new google.maps.LatLng(38.87044,-90.33821),
        new google.maps.LatLng(38.87036,-90.33885),
        new google.maps.LatLng(38.87029,-90.33905),
        new google.maps.LatLng(38.86992,-90.33919),
        new google.maps.LatLng(38.86951,-90.33943),
        new google.maps.LatLng(38.86911,-90.33971),
        new google.maps.LatLng(38.86826,-90.3401),
        new google.maps.LatLng(38.86732,-90.3403),
        new google.maps.LatLng(38.86678,-90.3405),
        new google.maps.LatLng(38.86607,-90.34084),
        new google.maps.LatLng(38.86568,-90.34079),
        new google.maps.LatLng(38.86542,-90.3405),
        new google.maps.LatLng(38.86494,-90.34042),
        new google.maps.LatLng(38.86458,-90.3403),
        new google.maps.LatLng(38.86421,-90.3401),
        new google.maps.LatLng(38.86369,-90.33998),
        new google.maps.LatLng(38.86288,-90.34009),
        new google.maps.LatLng(38.86246,-90.34021),
        new google.maps.LatLng(38.86158,-90.33873),
        new google.maps.LatLng(38.86142,-90.33879),
        new google.maps.LatLng(38.86124,-90.33884),
        new google.maps.LatLng(38.86095,-90.33886),
        new google.maps.LatLng(38.86065,-90.33883),
        new google.maps.LatLng(38.86037,-90.33874),
        new google.maps.LatLng(38.86018,-90.33866),
        new google.maps.LatLng(38.85996,-90.33854),
        new google.maps.LatLng(38.85838,-90.33744),
        new google.maps.LatLng(38.85767,-90.33693),
        new google.maps.LatLng(38.8575,-90.33679),
        new google.maps.LatLng(38.85736,-90.33662),
        new google.maps.LatLng(38.85701,-90.3361),
        new google.maps.LatLng(38.85654,-90.33534),
        new google.maps.LatLng(38.85604,-90.33448),
        new google.maps.LatLng(38.85582,-90.33398),
        new google.maps.LatLng(38.8556,-90.33326),
        new google.maps.LatLng(38.85483,-90.33103),
        new google.maps.LatLng(38.85462,-90.33044),
        new google.maps.LatLng(38.85457,-90.33034),
        new google.maps.LatLng(38.85374,-90.32889),
        new google.maps.LatLng(38.85358,-90.32865),
        new google.maps.LatLng(38.85323,-90.32819),
        new google.maps.LatLng(38.85234,-90.32708),
        new google.maps.LatLng(38.85203,-90.32673),
        new google.maps.LatLng(38.85183,-90.32653),
        new google.maps.LatLng(38.85169,-90.32641),
        new google.maps.LatLng(38.84919,-90.32478),
        new google.maps.LatLng(38.84658,-90.32313),
        new google.maps.LatLng(38.84486,-90.32202),
        new google.maps.LatLng(38.8435,-90.32116),
        new google.maps.LatLng(38.84339,-90.32109),
        new google.maps.LatLng(38.84311,-90.32093),
        new google.maps.LatLng(38.84335,-90.32042),
        new google.maps.LatLng(38.84341,-90.3202),
        new google.maps.LatLng(38.84357,-90.31963),
        new google.maps.LatLng(38.8436,-90.31952),
        new google.maps.LatLng(38.84368,-90.31925),
        new google.maps.LatLng(38.84404,-90.31937),
        new google.maps.LatLng(38.84427,-90.3194),
        new google.maps.LatLng(38.84444,-90.31938),
        new google.maps.LatLng(38.84458,-90.31936),
        new google.maps.LatLng(38.84472,-90.3193),
        new google.maps.LatLng(38.8449,-90.31922),
        new google.maps.LatLng(38.84507,-90.31909),
        new google.maps.LatLng(38.84533,-90.31885),
        new google.maps.LatLng(38.8457,-90.3185),
        new google.maps.LatLng(38.84618,-90.31801),
        new google.maps.LatLng(38.84653,-90.31765),
        new google.maps.LatLng(38.84664,-90.31754),
        new google.maps.LatLng(38.84669,-90.31748),
        new google.maps.LatLng(38.8475,-90.31665),
        new google.maps.LatLng(38.8477,-90.31646),
        new google.maps.LatLng(38.84812,-90.31602),
        new google.maps.LatLng(38.84856,-90.31557),
        new google.maps.LatLng(38.849,-90.31513),
        new google.maps.LatLng(38.84942,-90.3147),
        new google.maps.LatLng(38.8496,-90.31453),
        new google.maps.LatLng(38.84996,-90.31416),
        new google.maps.LatLng(38.85088,-90.31321),
        new google.maps.LatLng(38.85135,-90.31274),
        new google.maps.LatLng(38.85165,-90.31243),
        new google.maps.LatLng(38.85203,-90.31202),
        new google.maps.LatLng(38.85227,-90.31184),
        new google.maps.LatLng(38.85247,-90.31174),
        new google.maps.LatLng(38.85272,-90.31167),
        new google.maps.LatLng(38.85301,-90.31165),
        new google.maps.LatLng(38.8533,-90.31171),
        new google.maps.LatLng(38.85365,-90.31181),
        new google.maps.LatLng(38.85372,-90.31183),
        new google.maps.LatLng(38.85393,-90.31188),
        new google.maps.LatLng(38.85412,-90.31189),
        new google.maps.LatLng(38.85433,-90.31186),
        new google.maps.LatLng(38.85464,-90.31176),
        new google.maps.LatLng(38.85489,-90.31161),
        new google.maps.LatLng(38.85499,-90.31152),
        new google.maps.LatLng(38.85525,-90.3113),
        new google.maps.LatLng(38.8556,-90.31097),
        new google.maps.LatLng(38.85587,-90.31072),
        new google.maps.LatLng(38.85644,-90.31019),
        new google.maps.LatLng(38.8568,-90.30987),
        new google.maps.LatLng(38.85699,-90.30971),
        new google.maps.LatLng(38.85712,-90.30957),
        new google.maps.LatLng(38.8572,-90.30942)
      ];
    
    
      var SectorA2Polygon = new google.maps.Polygon({
        paths: SectorA2Coords,
        strokeColor: '#0000FF',
        strokeOpacity: 0.4,
        strokeWeight: 3,
        fillColor: '#0000FF',
        fillOpacity: 0.15
      });
    
    
      google.maps.event.addListener(map, 'click', function(e) {
        var result;
        if (google.maps.geometry.poly.containsLocation(e.latLng, SectorA2Polygon)) {
          result = 'red';
        } else {
          result = 'green';
        }
    
        var circle = {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: result,
          fillOpacity: .2,
          strokeColor: 'white',
          strokeWeight: .5,
          scale: 10
        };
    
        new google.maps.Marker({
          position: e.latLng,
          map: map,
          icon: circle
        })
      });
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
        </script>
      </head>
      <body>
        <div id="map-canvas"></div>
      </body>
    </html>
  2. #2
  3. Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Aug 2010
    Location
    Eastern Florida
    Posts
    3,711
    Rep Power
    347
    see this: http://forums.devshed.com/java-help-9/new-users--this-is-not-the-javascript-forum-141984.html

IMN logo majestic logo threadwatch logo seochat tools logo