How to add image in polygon google map api?

Question

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
                    });

There is no official way to do this via the API. But maybe this can help you: http://stackoverflow.com/a/36773480/2661226 (it appears to not work but that's because external resources could not be loaded, but the source code itself should give you some clues) — Matej P., Aug 02 '16 at 10:04

score 0 · Accepted Answer · answered Aug 02 '16 at 11:32

Here we need do a trick like following.

Add a polygon
Get the polygon coordinates.
Now draw a icon with the marker in the specified coordinates
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
                });

How to add image in polygon google map api?

1 Answers1