• Registered: 2015-07-09
  • Posts: 12

Topic: Google Custom Styled maps

Hello Alex,

We are trying to use custom styled google maps or custom image overlays for google maps. I couldn't find how we could provide the style info to the plugin so that we could load custom tile images. Could you kindly point us the right direction?

Regards,

Ali Arslan

  • Registered: 2015-06-23
  • Posts: 3,782

Re: Google Custom Styled maps

Hello.

1. You open
https://snazzymaps.com/
or
http://gmaps-samples-v3.googlecode.com/ … index.html

2. Customizable style of map as you want.

3. Open the Developer Tools of Browser (in most browsers hotkey - F12).

4. Find the URL of tile (img1). It will look like:
http: //mt0.googleapis.com/vt?pb=!1m4!1m3...

5. Open the URL to make sure that the image has a size of 256x256.

6. Copy this address.

7. Online Maps Inspector select «Provider - Custom», and paste the address in the «URL».

8. In the field «URL» replaced «!1iX!2iX!3iX», to «!1i{zoom}!2i{x}!3i{y}».
It should look something like:
http://mt0.googleapis.com/vt?pb=!1m4!1m … y}!2m3!...

Post's attachments

Attachment icon img1.png 723.63 kb, 124 downloads since 2015-08-12 

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.
  • Registered: 2015-07-09
  • Posts: 12

Re: Google Custom Styled maps

Thanks a lot Alex. This would help us immensely. Could you also tell if it would be possible to use custom map tiles if we could arrange the images ourselves instead of loading them from google?

  • Registered: 2015-06-23
  • Posts: 3,782

Re: Google Custom Styled maps

You can cache the tiles in your project, or cache it in your server.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.
  • Registered: 2015-07-09
  • Posts: 12

Re: Google Custom Styled maps

Awesome. Exactly what we needed. Thanks.

6 Reply by mrnobody (edited by mrnobody 2015-12-11 09:33:09)

  • Registered: 2015-12-10
  • Posts: 1

Re: Google Custom Styled maps

Hi, I have same problem. I changed URL to this: https://mts0.googleapis.com/maps/vt?pb= … e0!5m1!5f2

Post's attachments

Attachment icon SnazzyMaps.jpg 263.94 kb, 133 downloads since 2015-12-11 

  • Registered: 2015-06-23
  • Posts: 3,782

Re: Google Custom Styled maps

Hello.

Tiles of your URL have a size 512x512.

Correct URL:
https://mts0.googleapis.com/maps/vt?pb= … NTE4Yw!4e0

Like your URL, but without the latter part «!5m1!5f2».
Most likely, this part specifies the size of the tiles.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.
  • Registered: 2016-05-09
  • Posts: 15

Re: Google Custom Styled maps

Hey there,

I've not been able to get styling working given your post. I noticed that the domain that I'm using is not mts0.googleaplis but is maps.googleapis.com. Otherwise I think everything is ok. Here is the url I'm using. Am I forgetting something?

https://maps.googleapis.com/maps/vt?pb= … 5sOjE3!4e0

Cheers,

Paul

  • Registered: 2015-06-23
  • Posts: 3,782

Re: Google Custom Styled maps

Hello.

You wrote "{x}}" instead of "{x}".
When you fix it, it will work well. Checked.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.
  • Registered: 2016-05-09
  • Posts: 15

Re: Google Custom Styled maps

Confirmed working wink cheers