CODEWITHSUNDEEP
javascriptjsongoogle-mapsgoogle-maps-api-3
Rounin
Rounin

Reputation: 29501

How can I give Google Maps API landscape a background image instead of a background color?

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 managed to give the landscape a background color.

  {
    "featureType": "landscape",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#ff0000"
      }
    ]
  }

But I would like to give the landscape a background image, rather than a background color.

I can either do this directly using something like:

  {
    "featureType": "landscape",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "background-image": "/my-image.jpg"
      }
    ]
  }

or else give #map a background-image using CSS and give the landscape background colour an opacity of 0 using alpha channel (either rgba(0, 0, 0, 0) or else hsla) to allow the background-image to show through.

But so far, I have been unable to get either of these approaches to work - the "color" key only seems to take a hex value. (Really?)

How can I give the landscape a background image instead of a background color?

Upvotes: 0

Views: 1919

Answers (3)

Rounin
Rounin

Reputation: 29501

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:

http://maps.zemplate.com/customizing-maps/add-an-image-overlay-to-a-google-map

Upvotes: 1

Franco Vizcarra
Franco Vizcarra

Reputation: 426

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

function initMap() {
    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 = new USGSOverlay(bounds, srcImage, map);
  }

Upvotes: 1

betofarina
betofarina

Reputation: 1094

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)

Upvotes: 0

Related Questions