Jeeva Susej Jeeva Susej -5 years ago 145
AngularJS Question

How to add image in polygon google map api?

I have written my own google map directive in Angular.
I have drawn polygon using the drawing manager. Then from the coordinates drew by the user, got the coordinates and drew the Polygon.

Now I want to add the image in polygon.
How to add the image in polygon area?

bermudaTriangle = new google.maps.Polygon({
paths: polygonsArray,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
, editable: true

Answer Source

Here we need do a trick like following.

  1. Add a polygon
  2. Get the polygon coordinates.
  3. Now draw a icon with the marker in the specified coordinates
  4. Then it will look like an icon inside the polygon

So here, after adds the polygon, I have drawn icon with the help of marker in the center place of the polygon.

var bounds = new google.maps.LatLngBounds();
                var i, center;

                for (i = 0; i < polygonsCoordinates.length; i++) {
                center = bounds.getCenter();
                var image = '';
                var beachMarker = new google.maps.Marker({
                    position: { lat:, lng: center.lng() },
                    map: map,
                    icon: image
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download