Snippet of code using the google maps api.

MapHandler Sample

var app = app || {};
;(function($){

    app.MapHandlerView = {
        
        cache: function() {
            this.$wrapper      = $('#location-area');
            this.$inputCountry = this.$wrapper.find('input[name="pais"]');
            this.$inputstate   = this.$wrapper.find('input[name="estado"]');
            this.$inputCity    = this.$wrapper.find('input[name="ciudad"]');
            this.$inputMap     = this.$wrapper.find('input[name="mapa"]');
            this.$inputAddress = this.$wrapper.find('textarea[name="direccion"]');
            this.$inputCP      = this.$wrapper.find('input[name="codigopostal"]');
        },

        getCurrentPosition: function() {
            var dfd = $.Deferred();

            navigator.geolocation.getCurrentPosition(function(position){
                dfd.resolve(position)
            });

            return dfd.promise();
        },

        init: function() {
            this.cache();
            this.latLng = '';
            this.markers = [];
        },

        placeMarker: function(position, map, isLL) {
            if(this.markers.length > 0) {
                for(var i = 0, len = this.markers.length; i<len; i++)
                    this.markers[i].setMap(null);
            }

            this.markers.push( new google.maps.Marker({
                position: position,
                map: map
            }));

            if(isLL)
                return;

            this.setAddressInfo(position);
        },

        render: function() {
            var pos = this.getCurrentPosition();
            var self = this;
            var mapOptions = {
                zoom: 11,
                navigationControl: true,
                mapTypeControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = null;

            pos.done(function(currPos){
                mapOptions.center = new google.maps.LatLng(currPos.coords.latitude, currPos.coords.longitude);
                map = new google.maps.Map(self.$el.find('#map-canvas')[0], mapOptions);

                google.maps.event.addListener(map, 'click', function(e) {
                    self.placeMarker(e.latLng, map);
                });
            });

        },

        setAddressInfo: function(latLng) {
            var geocoder = new google.maps.Geocoder();
            var country, state, city, address, cp;
            var self = this;
            geocoder.geocode({'latLng': latLng}, function(results, status){
                if(status === google.maps.GeocoderStatus.OK) {
                    address = results[0].formatted_address;
                    country = results.pop().formatted_address.split(',')[0];
                    state   = results.pop().formatted_address.split(',')[0];
                    city    = results.pop().formatted_address.split(',')[0];
                    cp      = results.pop().formatted_address.match(/[0-9]{5}/);

                    self.$inputCountry.val(country);
                    self.$inputstate.val(state);
                    self.$inputCity.val(city);
                    self.$inputMap.val(latLng);
                    self.$inputAddress.val(address);
                    self.$inputCP.val(cp);
                }
            });

        }
    });

    app.MapHandlerView.init();
    google.maps.event.addDomListener(window, 'load', app.MapHandlerView.render());

})(jQuery);