Amitesh Verma

Amitesh Verma

  • NA
  • 746
  • 86.9k

polygon in google maps

Nov 28 2013 6:21 AM
i have two codes that place markers on google maps using JSON...

Marker code is this..

function grid_latlong() {

            var markers = JSON.parse('<%=ConvertDataTabletoString2() %>');

            var mapOptions = {

                zoom: 7,

                center: new google.maps.LatLng(28.5472, 77.2508),

                mapTypeId: google.maps.MapTypeId.ROADMAP,

                mapTypeControl: true,

                mapTypeControlOptions:

        {

            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,

            poistion: google.maps.ControlPosition.TOP_RIGHT,

            mapTypeIds: [google.maps.MapTypeId.ROADMAP,

              google.maps.MapTypeId.TERRAIN,

              google.maps.MapTypeId.HYBRID,

              google.maps.MapTypeId.SATELLITE]

        },

                navigationControl: true,

                navigationControlOptions:

        {

            style: google.maps.NavigationControlStyle.ZOOM_PAN

        },

                scaleControl: true,

                disableDoubleClickZoom: true,

                draggable: true,

                streetViewControl: true,

                draggableCursor: 'move'

            };

            var infoWindow = new google.maps.InfoWindow();

            //var image = 'images/grid.png';

            var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            for (i = 0; i < markers.length; i++) {

                var data = markers[i];

                var myLatlng = new google.maps.LatLng(data.lat, data.long);

                // var image = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';

                var image = 'http://maps.google.com/mapfiles/kml/pal3/icon62.png';

                var marker = new google.maps.Marker({

                    position: myLatlng,

                    map: map,

                    title: data.grid,

                    icon: image

 

                });

 

                (function (marker, data) {

 

                    // Attaching a click event to the current marker

                    google.maps.event.addListener(marker, "click", function (e) {

                        infoWindow.setContent(data.grid);

                        infoWindow.open(map, marker);

                    });

                })(marker, data);

            }

        }

 


I want to add POLYGONS Using the same JSON Method...But i m bit stuck...Posting my code...plz help//


  function initialize2() {

         var markers = JSON.parse('<%=ConvertDataTabletoString2() %>');

        var mapOptions = {

            zoom: 15,

            center: new google.maps.LatLng(28.526283,77.166679),

            mapTypeId: google.maps.MapTypeId.SATELLITE

        };

 

        var bermudaTriangle;

 

        var map = new google.maps.Map(document.getElementById('map-canvas'),

      mapOptions);

      for (i = 0; i < markers.length; i++) {

                var data = markers[i];

 

        // Define the LatLng coordinates for the polygon's path.

        var triangleCoords = [

        new google.maps.LatLng(data.x1,data.y1),

         new google.maps.LatLng(data.x2,data.y2),

        new google.maps.LatLng(data.x3,data.y3),

         new google.maps.LatLng(data.x4,data.y4),

         new google.maps.LatLng(data.x5,data.y5),

           new google.maps.LatLng(data.x6,data.y6),

            new google.maps.LatLng(data.x7,data.y7),

       //      new google.maps.LatLng(data.x8,data.y8),

       //   new google.maps.LatLng(data.x9,data.y9),

        // new google.maps.LatLng(data.x10,data.y10),

        //new google.maps.LatLng(data.x11,data.y11),

          //    new google.maps.LatLng(data.x12,data.y12)     

 

  

    ];

        // Construct the polygon.

        bermudaTriangle = new google.maps.Polygon({

            paths: triangleCoords,

            strokeColor: '#FF0000',

            strokeOpacity: 0.8,

            strokeWeight: 2,

            fillColor: '#FF0000',

            fillOpacity: 0.10,

           

        });

     

 

       bermudaTriangle.setMap(map);

    }