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.
varexampleLoc=L.latLng(-25.363,131.0449);varmap=L.mapbox.map('map','examples.map-9ijuk24y').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);varcircle=L.circle(exampleLoc,400000,{color:'#FF0000',opacity:0.8,weight:3,fillColor:'#FF0000',fillOpacity:0.1}).addTo(map);varexampleGeoJson=L.geoJson(features).addTo(map);functioninitialize(){varexampleLoc=newgoogle.maps.LatLng(-25.363882,131.044922);varmap=newgoogle.maps.Map(document.getElementById('map-canvas'),{zoom:4,center:exampleLoc,disableDefaultUI:true,mapTypeId:google.maps.MapTypeId.ROADMAP});varinfowindow=newgoogle.maps.InfoWindow({content:'Hello, world!'});varmarker=newgoogle.maps.Marker({position:exampleLoc,map:map});google.maps.event.addListener(marker,'click',function(){infowindow.open(map,marker);});varcircle=newgoogle.maps.Circle({strokeColor:'#FF0000',strokeOpacity:0.8,strokeWeight:3,fillColor:'#FF0000',fillOpacity:0.1,map:map,center:exampleLoc,radius:400000});varexampleKml=newgoogle.maps.KmlLayer({url:'https://gist.github.com/rsudekum/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.