CODEWITHSUNDEEP
google-mapsgoogle-maps-api-2
Hamad Salahuddin
Hamad Salahuddin

Reputation: 1169

Can not Draw a polygon using Google Map API V2

I have the following function in which I am trying to draw a polygon with certain Lat Long

function AddTile( minLat, minLon, maxLat, maxLon )
        {
            var points      = [];


            points.push( new GLatLng( parseFloat(maxLat),   parseFloat(maxLon)  ));
            points.push( new GLatLng( parseFloat(minLat),   parseFloat(maxLon)  ));
            points.push( new GLatLng( parseFloat(minLat),   parseFloat(minLon)  ));
            points.push( new GLatLng( parseFloat(maxLat),   parseFloat(minLon)  ));               
            var polygon = new GPolygon(points, "#f33f00", 5, 1, "#ff0000", 0.2);
        map.addOverlay(polygon);


    //map.addOverlay(new GPolyline(points,'#8080FF', 8, 0.5, '#8080FF', 0.5));


        }

but can not get the polygon drawn on the map. Howevery the Polyline can get drawn which show the lines having the gap among these. What I want to know from you is Whether my API for Google maps no longer support drawing the polygon. I am using Google maps API V2. if there is a way for this to sort then describe. Also if polygon can not be drawn then how can I use new GPolyline() construct to draw the polines without any gap and a background color to eliminate the gaps of lines. I have tried giving weight a value 10 which makes the lines more solid hence making the non transparent which i don't want. Please guide. Thank You

Upvotes: 1

Views: 471

Answers (1)

hxh_Kite
hxh_Kite

Reputation: 27

As geocodezip has suggested you should use API v3. Below I have converted your code that used old(deprecated) v2 functions like GLatLng, GPolygon to v3 equivalents. See if it works

function AddTile( minLat, minLon, maxLat, maxLon)
{
    var mapOptions = {
                      zoom: 4,
                      center: new google.maps.LatLng( 5.44, 22.67),  // set centre somewhere in Africa
                      mapTypeId: google.maps.MapTypeId.TERRAIN
                      };     
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var points      = [];
    points.push( new google.maps.LatLng( parseFloat(maxLat), parseFloat(maxLon) ));
    points.push( new google.maps.LatLng( parseFloat(minLat), parseFloat(maxLon) ));
    points.push( new google.maps.LatLng( parseFloat(minLat), parseFloat(minLon) ));
    points.push( new google.maps.LatLng( parseFloat(maxLat), parseFloat(minLon) ));
    points.push( new google.maps.LatLng( parseFloat(maxLat), parseFloat(minLon) ));  // same as your 1st point, // polygons should be closed

    // Draw polygon.
    var polygon = new google.maps.Polygon({
                      paths: points,
                      strokeColor: '#f33f00',
                      strokeOpacity: 1,
                      strokeWeight: 5,
                      fillColor: '#ff0000',
                      fillOpacity: 0.2
                   });
    polygon.setMap(map);

    google.maps.event.addListener(map, 'click', function(event){
       alert('whatever you want to do');
    });  // in case you want to do something on user click
}

Upvotes: 1

Related Questions