Using different tile sources as base maps

Google base maps display an immense amount of content (local POI information, road hierarchies, driving directions, and so on) and a large styling palette. In addition, it provides tools to change the styling of its base maps in its JavaScript API.

Moreover, you can have your other map tile sources displayed as base maps in the Google Maps interface. This feature enables you to display your tiled maps in the Google Maps interface, utilizing most of the tools of the Google Maps JavaScript API.

In this recipe, we will go through displaying OpenStreetMap tiles as base maps in the Google Maps interface, using the JavaScript API.

Getting ready

We can continue on from the Creating a simple map in a custom DIV element recipe from Chapter 1, Google Maps JavaScript API Basics, as we do not need to reiterate the basics of getting the map on screen.

How to do it…

With this recipe, you will see the OpenStreetMap tiles on top of Google Maps after completing the given...