Google maps Rectangle API - adding a background image

Question

I'm using a Google Maps Rectangle as seen here.

I'm looking at the Rectangle options api and there's nothing about adding an image - only border and background color options. I was wondering if there's another way to do it? I'd like to have the border, but just put a background image instead of a colour.

Answer 1

You can do this by adding a custom overlay to your map.

You initialize the map.

var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11,
      center: {lat: 62.323907, lng: -150.109291},
      mapTypeId: 'satellite'
    });

Then by setting bounds you indicate how large the image will by it's width.

var bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(62.281819, -150.287132),
        new google.maps.LatLng(62.400471, -150.005608));

Indicate the source of your image.

var srcImage = 'your_path/your_image.png';

Then create the new Overlay.

overlay = new USGSOverlay(bounds, srcImage, map);