GMAP3 Plugin

by bizamajig

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<input type="text" id="address"/>
<div id="test"></div>
<script>
    /*!
 *  GMAP3 Plugin for jQuery
 *  Version   : 6.0.0
 *  Date      : 2014-04-25
 *  Author    : DEMONTE Jean-Baptiste
 *  Contact   : [email protected]
 *  Web site  : http://gmap3.net
 *  Licence   : GPL v3 : http://www.gnu.org/licenses/gpl.html
 *  
 *  Copyright (c) 2010-2014 Jean-Baptiste DEMONTE
 *  All rights reserved.
 */
;(function ($, undef) {

var defaults, gm,
  gId = 0,
  isFunction = $.isFunction,
  isArray = $.isArray;

function isObject(m) {
  return typeof m === "object";
}

function isString(m) {
  return typeof m === "string";
}

function isNumber(m) {
  return typeof m === "number";
}

function isUndefined(m) {
  return m === undef;
}

/**
 * Initialize default values
 * defaults are defined at first gmap3 call to pass the rails asset pipeline and jasmine while google library is not yet loaded
 */
function initDefaults() {
  gm = google.maps;
  if (!defaults) {
    defaults = {
      verbose: false,
      queryLimit: {
        attempt: 5,
        delay: 250, // setTimeout(..., delay + random);
        random: 250
      },
      classes: (function () {
        var r = {};
        $.each("Map Marker InfoWindow Circle Rectangle OverlayView StreetViewPanorama KmlLayer TrafficLayer BicyclingLayer GroundOverlay StyledMapType ImageMapType".split(" "), function (_, k) {
          r[k] = gm[k];
        });
        return r;
      }()),
      map: {
        mapTypeId : gm.MapTypeId.ROADMAP,
        center: [46.578498, 2.457275],
        zoom: 2
      },
      overlay: {
        pane: "floatPane",
        content: "",
        offset: {
          x: 0,
          y: 0
        }
      },
      geoloc: {
        getCurrentPosition: {
          maximumAge: 60000,
          timeout: 5000
        }
      }
    }
  }
}


/**
 * Generate a new ID if not defined
 * @param id {string} (optional)
 *...

CSS

#test {
    width: 400px;
    height: 400px;
    border 2px dashed #ccc;
}

JavaScript

$('#test').gmap3(
  {action: 'init',
    options:{
      center:[25, 90],
      zoom:13,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
      navigationControl: true,
      scrollwheel: true,
      streetViewControl: true
    }
  }
);

$('#address').autocomplete({
  //This bit uses the geocoder to fetch address values
  source: function(request, response) {
    $("#test").gmap3({
      action:'getAddress',
      address: request.term,
      callback:function(results){
        if (!results) return;
        response($.map(results, function(item) {
          return {
            label:  item.formatted_address,
            value: item.formatted_address,
            latLng: item.geometry.location
          }
        }));
      }
    });
  },
  //This bit is executed upon selection of an address
  select: function(event, ui) {
    $("#test").gmap3(
      {action:'clear', name:'marker'},
      {action:'addMarker',
        latLng:ui.item.latLng,
        map:{center:true}
      }
    );
  }
});