Adding simple Google Map with API 3 without jQuery plugin

Warning: We have developed a more complete solution about Google Map, check it here.

Coffeescript
This script will create a map inside the element with id specified in the variable id; the map will be showed with a single marker pointed in the coordinates specified in the variable markerLatLng; there will be also a pop up with html content (see variable infoWindowContent) and a custom marker icon (set the path to the custom icon in the variable image)

  initializeMap = ->
    # Settings (you only need to edit these settings and your map will be displayed inside the element with id "map")
    id = "map"
    markerLatLng = new google.maps.LatLng(41.823837, -71.411727)
    infoWindowContent = "

Your home

Your address
 Your town"
    image = "assets/img/custom_icon.png"
    title = "My home is here"

    # Map Options
    mapOptions =
      zoom: 8
      center: markerLatLng
      scrollwheel: false
    # Creates the map inside the above specified ID
    map = new google.maps.Map(document.getElementById(id), mapOptions)
    # Creates the marker
    marker = new google.maps.Marker(
      position: markerLatLng
      map: map
      title: title
      icon: image
    )
    # Creates a pop up (info window)
    infoWindow = new google.maps.InfoWindow(
      content: infoWindowContent
    )
    # When click on 'marker' icon it shows the pop up
    google.maps.event.addListener marker, "click", ->
      infoWindow.open map, marker

  # Displays the map
  google.maps.event.addDomListener window, "load", initializeMap

HTML
The map will be created inside the div #map

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
...

LESS
Remember to set the height of the div that contains the map. And if you want to change some styles for the pop up you can do it adding styles to the gm-style-iw class

#map{
  height:200px;

  // PopUp (info window)
  .gm-style-iw{
    text-align:center;
  }
}