How Can I Give Google Maps Api Landscape A Background Image Instead Of A Background Color?

March 02, 2024 Post a Comment

I am experimenting with Google Maps API for the first time. I have got as far as positioning and zooming the map, removing features and removing certain UI Controls. I have also ma

Solution 1:

You can do this by adding a custom overlay. Click the link to see a working example.

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

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

    // The photograph is courtesy of the U.S. Geological Survey.var srcImage = 'url_of_your_image';

    // The custom USGSOverlay object contains the USGS image,// the bounds of the image, and a reference to the map.
    overlay = newUSGSOverlay(bounds, srcImage, map);
  }

Solution 2:

It turns out the term for what I was looking for is not Custom Overlay, but Ground Overlay.

This (more straightforward) overlay solution is rather simpler.

To create a Ground Overlay there are only 2 steps:

Step 1

Declare variables for the image you wish to use and the latitude and longitude co-ordinates for both the top-right and bottom left corners of your image:

var imageSrc = '/my-image.png';
var imageNortheastCorner = new google.maps.LatLng(58.70303006647019, 2.439521484375);
var imageSouthwestCorner = new google.maps.LatLng(49.99166659140519, -8.402314453125);

Step 2

Apply the declared variables to create both the image bounds and the overlay and then add the overlay to the map:

var imageBounds = new google.maps.LatLngBounds(imageSouthwestCorner, imageNortheastCorner);

myOverlay = new google.maps.GroundOverlay(imageSrc, imageBounds);

myOverlay.setMap(map);

That's all that is needed.

Special thanks to this page (quite far down the search results) which showed how simple the process is:

Solution 3:

you can not give a background image, as stated here:

https://developers.google.com/maps/documentation/javascript/style-reference

color (an RGB hex string of format #RRGGBB) sets the color of the feature.

and there is no feature for images, my suggestion would be to start a Feature Request in the issue tracker suggesting to add this feature to the JSON style object. (https://issuetracker.google.com)

JavaScript Passion