Published using Google Docs
Getting Started with the Google Maps API
Updated automatically every 5 minutes

Required:

Basic knowledge of HTML

Basic knowledge of JavaScript

For Android and iPhone optional sections:

Basic knowledge of Java and Android development for Android

Basic knowledge of Objective C and iPhone development for iPhone

Step 1: Static Map

  1. Create a basic HTML page
  2. Add an img tag to the body element
  3. Make the src attribute of the img tag the following:
    http://maps.google.com/maps/api/staticmap?center=yourhometown&zoom=14&size=400x400&sensor=false
  4. Load page

Step 2:

  1. Create a hello-world Google Map:
    <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

  html { height: 100% }

  body { height: 100%; margin: 0px; padding: 0px }

  #map_canvas { height: 100% }

</style>

<script type="text/javascript"

    src="http://maps.google.com/maps/api/js?sensor=true">

</script>

<script type="text/javascript">

  function initialize() {

    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {

      zoom: 8,

      center: latlng,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),

        myOptions);

  }

</script>

</head>

<body onload="initialize()">

  <div id="map_canvas" style="width:100%; height:100%"></div>

</body>

</html>

  1. Add in HTML GeoLocation detection

if(navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(function(position) {

      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

      map.setCenter(initialLocation);

    }, function() {

      handleNoGeolocation();

    });

   function handleNoGeolocation(){

   //do something

}

}

  1. Add in a marker and a circle to indicate accuracy:
    var accuracy = position.coords.accuracy;

        map.setZoom(16);

    var marker = new google.maps.Marker({

            map: map,

            position: initialLocation,

            title: 'Here I am'

    });

    var circle = new google.maps.Circle({

            center: initialLocation,

            map: map,

            fillOpacity: .33,

            radius: accuracy

});

  1. Use KML or GeoRSS files for increased performance:
    var eqLayer = new google.maps.KmlLayer('http://earthquake.usgs.gov/earthquakes/waveforms/netq/nqinpp.kml');

            eqLayer.setMap(map);

documentation reference: http://code.google.com/apis/maps/documentation/javascript/overlays.html#KMLLayers

  1. Add in a map style:
    example:     http://manomarks.net/stylemap1.html
    documentation reference:     http://code.google.com/apis/maps/documentation/javascript/maptypes.html#StyledMaps
  2. Add in Street View
    in mapOptions add
    streetViewControl    : true
    documentation reference
    http://code.google.com/apis/maps/documentation/javascript/services.html#StreetView
  3. Add in a Fusion Tables layer
    layer     = new google.maps.FusionTablesLayer(200949, {
    query: "SELECT * FROM 200949 WHERE ST_INTERSECTS(latitude,CIRCLE(LATLNG(37,-113),50000)"}
    );
    layer.setMap(map);
    documentation reference:

            http://code.google.com/apis/maps/documentation/javascript/overlays.html#FusionTables

            http://code.google.com/apis/fusiontables/docs/developers_reference.html#Spatial

            sample:

            http://manomarks.net/ftspatial.html