Next week Google Maps JavaScript API v2 will be deprecated, and apps will need to migrate to a new API to prevent old syntax from breaking. I’ve received many questions about migrating to MapBox, so here are two simple maps using MapBox.js and Google Maps API to give you a sense of how analogous these web mapping APIs are. Luckily these map frameworks have very similar concepts and conventions.

MapBox.js Demo

var exampleLoc = L.latLng(-25.363, 131.0449);
var map = L.mapbox.map('map','mapbox.outdoors')
  .setView(exampleLoc, 4);

L.mapbox.markerLayer({
  type: 'Feature',
  geometry: {
    type: 'Point',
    coordinates: [131.044922,-25.363882]
  },
  properties: {
    title: '',
    description: 'Hello, world!',
    'marker-size': 'large',
    'marker-symbol': 'star',
    'marker-color': '#48a'
  }
}).addTo(map);

var circle = L.circle(exampleLoc, 400000,{
  color:'#FF0000',
  opacity: 0.8,
  weight: 3,
  fillColor:'#FF0000',
  fillOpacity: 0.1
}).addTo(map);

var exampleGeoJson = L.geoJson(features).addTo(map);

Google Maps API v3 Demo

function initialize() {

  var exampleLoc = new google.maps.LatLng(-25.363882,131.044922);

  var map = new google.maps.Map(document.getElementById('map-canvas'),{
    zoom: 4,
    center: exampleLoc,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow({
      content: 'Hello, world!'
  });

  var marker = new google.maps.Marker({
      position: exampleLoc,
      map: map
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });

  var circle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.1,
    map: map,
    center: exampleLoc,
    radius: 400000
  });

  var exampleKml = new google.maps.KmlLayer({
    url: 'https://gist.github.com/bsudekum/531cb665aa8f7f3f0745/raw/d874f6ccea7d47105387f3ed7f7224eb44fb3c8e/demo.kml',
    clickable: false
  });

  exampleKml.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

Here’s a quick reference table between the two APIs.

Type MapBox.js Google Maps Api v3
Map L.mapbox.map(); new google.maps.Map();
Add marker L.marker(); new google.maps.Marker();
Event listener map.on(); google.maps.event.addListener();
Add data layer (GeoJSON/KML) L.geoJson(); new google.maps.KmlLayer();
Store a lat/lng L.latLng(); new google.maps.LatLng();
Popup L.popup() new google.maps.InfoWindow();
Set zoom map.setZoom(); map.setZoom();
Pan to location map.panTo(); map.panTo();

As you can see, MapBox.js and Google Maps API follow comparable naming patterns and provide the same basic functionality. If you’re trying MapBox.js for the first time and need help, just post your questions on support.mapbox.com and we’ll lend a hand.

Plus, this November we’re offering a free month of MapBox at to all new subscribers. Use the promo code BEAUTIFULNOV2013 when you sign up to get a free standard plan for 1 month.