Switching from the Google Maps API to an open source library like Leaflet gives you the ability to choose between new, open, and less expensive mapping alternatives like MapBox, MapQuest Open, and OpenStreetMap.

Since releasing our API connector Wax and documenting the MapBox API in its totality, we’ve paid special attention to making sure that MapBox maps work in numerous clients - Modest Maps, Leaflet, Polymaps, OpenLayers and even the Google Maps API v3. We’ve been able to do this because the entire specification is open source, including our interactivity code, and because we provide something that Google doesn’t: direct tile access.

While you can use TileJSON to automatically configure our maps, it’s just a shortcut to adding a normal layer to a mapping API. It’s simple to use MapBox tiles without using any code from MapBox - so it’s also easy to try out different tile providers to find the one that best fits your usage and budget. Leaflet is a great place to start in making the jump from Google because it’s very similar to the Google Maps API.

Creating a basic map with Google Maps:

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  center: new google.maps.LatLng(51.505, -0.09),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

and in Leaflet:

var map = new L.Map('map', {
    center: new L.LatLng(51.505, -0.09),
    zoom: 8,
    layers: new L.TileLayer('https://a.tiles.mapbox.com/v3/mapbox.world-bright/{z}/{x}/{y}.png')
});

Markers and overlays in Leaflet

Unlike Modest Maps, the nano-sized framework we use for MapBox Hosting’s embed functionality, Leaflet supports an array of markers and polygon overlays very similar to Google Maps. There are custom icons, and you can bring in your GeoJSON for polygon overlays.

For large datasets and powerful styling controls, TileMill is unbeatable, but smaller dynamic data can work really well in Leaflet - and often better than it does with the Google Maps API. One example of this is StreetEasy, a real estate aggregator that just made the switch from Google Maps to custom MapBox maps.

Adding a marker in the Google Maps API looks like:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.505, -0.09),
    map: map,
    title:'Hello World!'
});

And in Leaflet it isn’t much different:

var marker = new L.Marker(new L.LatLng(51.505, -0.09));
marker.bindPopup('Hello, world!');
map.addLayer(marker);

Try out Leaflet

If you’re looking to experiment with alternatives to Google Maps, Leaflet’s a great way to go. It gives you flexibility between tile providers, a rich feature set, and unlike the Google Maps API it’s BSD-licensed open source code. For help working with Leaflet and MapBox, just ask us on the MapBox support site.

MapBox for fast, reliable custom map tile hosting

In addition to your data markers and polygons rendered through Leaflet, you can add in layers of map tiles for a custom base map, or additional features like restaurants, transit stops, or neighborhood boundaries. Try using TileMill to style your own data or pull in extracts from OpenStreetMap. When you’re ready to share your maps, check out MapBox plans starting at just $5 a month. MapBox includes server-side compositing so your maps will be fast even as you add more layers and work well on mobiles.