Jeeva Susej Jeeva Susej - 4 months ago 24
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

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++) {
                    bounds.extend(polygonsCoordinates[i]);
                }
                center = bounds.getCenter();
                var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
                var beachMarker = new google.maps.Marker({
                    position: { lat: center.lat(), lng: center.lng() },
                    map: map,
                    icon: image
                });