jQuery Google Maps

Needs some massaging to make it generic.

by dhchow

JavaScript

/**
  Reuseable Google Maps component. Requires google maps JS api
  
  new cotweet.components.GoogleMap("#map_container", 
    {
      options: {
        center: "37.774929, -122.419415" 
      },
      // gmapOptions override options if applicable
      gmapOptions: {
        mapTypeControl: false,
        panControl: false,
        streetViewControl: false,
        zoomControlOptions: { 
          style: google.maps.ZoomControlStyle.SMALL
        }
      }
    }
  )
*/
cotweet.components.GoogleMap = Class.extend({
  init: function($container, config) {
    this.container = $container
    
    this.options = {
      center: [37.781561, -122.392287], // lat, long
    }
    this.options = $.extend(true, this.options, config.options)
    
    this.gmapOptions = {
      zoom: 12,
      center: this.latLng(this.options.center),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.options = $.extend(true, this.gmapOptions, config.gmapOptions)
    
    // Create the map
    this.map = new google.maps.Map(this.container[0], this.gmapOptions);
    
    this.g_latlons = [];
    this.g_markers = [];
    this.g_infowindows = [];
    
    this.addListeners();
  },
  
  /**
    options : {
      title: "My hizzle",
      content: string|Node,
      icon: string (url)
    }
  */
  addMarker: function(lat, lon, options) {
    if (!options) options = {};
    
    var g_latlon = this.latLng(lat, lon);
    
    this.g_latlons.push(g_latlon);
    
    
    var marker = new google.maps.Marker({
      position: g_latlon, 
      map: this.map,
      title: options.title || $(options.content).length ? $(options.content).text() : options.content,
      icon: options.icon
    });
    
    if (options.content) {
      var infowindow = new google.maps.InfoWindow({content: options.content, position: g_latlon})
      this.g_infowindows.push(infowindow)
      
      // Only display the last marker clicked
      google.maps.event.addListener(marker, 'click', function() {
       ...