CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3foursquare
Beto Aveiga
Beto Aveiga

Reputation: 3670

How to add a background image to google maps markers?

I'm using foursquare API to show some places on a map. When I tried to render the icons in the categories some images give 404. Ex:

https://foursquare.com/img/categories_v2/shops/mall.png

So I change the pattern to match this path that is the path that foursquare uses for it's icons:

https://foursquare.com/img/categories_v2/shops/mall_32.png

The problem now is that these icons have transparent background (which looks confusing) and I want to know a way to attach these markers some kind of background.

Thanks!

PD: I don't want to use shadows because I read it's deprecated.

Upvotes: 3

Views: 4017

Answers (1)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

Google map markers are put in place as Canvas elements not DOM elements, and there's no direct equivalent of a background image.

You could try one of two things :

  • Create your own marker image complete with a halo or background rectangle, then specify your image as the icon when marker(s) are created (see the marker options section of the documentation).

  • Create a general purpose background image with no foreground then, for each required marker create two markers positioned such that the foreground overlays the background.

The first approach is more efficient and would generally be preferred.

The second approach might be useful if you had many types of marker and wanted each of them to be set against the same background image. This would be inefficient in terms of client CPU and RAM but would save you time in preparing the artwork.

Upvotes: 4

Related Questions