How do I Add and Remove Polygons on Google Maps v3?

I'm trying to show and remove polygons onto a Google Map, using v3 of the API. In my JavaScript, I've already got an MVCArray of some custom Lat-Longs.

I'm trying to figure out how to add these polygons and then, based upon some other JavaScript event or user action, such as a click on a polygon (that has been rendered), that polygon will be removed.

Can someone help? Any code or links to examples? I'm struggling to find some examples. Most of them usually go to some v2 code.

Answers


In the API docs, there are a couple of simple examples of adding a polygon to a map. Here's the initialize() function from the simple Bermuda Triangle example with the addition of adding an event listener to remove the polygon when clicked.

function initialize() {
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
  var myOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

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

  var triangleCoords = [
      new google.maps.LatLng(25.774252, -80.190262),
      new google.maps.LatLng(18.466465, -66.118292),
      new google.maps.LatLng(32.321384, -64.75737),
      new google.maps.LatLng(25.774252, -80.190262)
  ];

  // Construct the polygon
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);

  // add an event listener
  google.maps.event.addListener(bermudaTriangle, 'click', function() {
      this.setMap(null);
  });

}

I'm not sure if this answer applies to javascript, but definitely applies to java.

If you have a reference to the polygon object you want to remove, then simply call the remove() method of that polygon. Refer to the documentation linked below.

https://developers.google.com/android/reference/com/google/android/gms/maps/model/Polygon.html#remove()


Need Your Help

How to determine if a resize event was triggered by soft keyboard in mobile browser?

javascript jquery html mobile browser

There's a lot of discussion about the soft keyboard but I haven't found a good solution for my problem yet.

How can I change the text and icon colors for tabBarItems in iOS 7?

uitabbarcontroller uitabbar tabbar uitabbaritem ios7

How can I change the text and icon colors for UITabBar and UITabBarItems in iOS 7? The default gray text seems dim and hard to read for unselected tabbar items.