blechreiz-website/location_field/media/form.js

($ || django.jQuery)(function($){
	
	

	// map:              the div that is made to the map
	// coordinate_field: input element where position & zoom is stored ( and read to init the map )
    function MapObject( mapDiv, coordinate_field, init_position, init_zoom )
    {
    	// Default Argument for init_position
    	init_position = typeof init_position !== 'undefined' ? init_position : new google.maps.LatLng( 49.340174,10.890595 );
    	init_zoom     = typeof init_zoom     !== 'undefined' ? init_zoom     : 16;

    	
		// --------------------------- Members    --------------------------------------
    	
        this.map      = new google.maps.Map( mapDiv, {
        					mapTypeId: google.maps.MapTypeId.HYBRID, 
        					zoomControl: true,
        					streetViewControl: false,
						    zoomControlOptions: {  style: google.maps.ZoomControlStyle.SMALL  }
        					} );
        
        this.geocoder = new google.maps.Geocoder();
        this.geocoder.region = "de";
        this.geocoder.location = init_position;
        
		this.marker = new google.maps.Marker({
				        map: this.map,
				        position: init_position,
				        draggable: true
				     });       

				     
		// --------------------------- Methods    --------------------------------------

		this.placeMarkerUsingAddressString = function ( addressStr )
		{
			var theObject = this;
			this.geocode( addressStr , function(l) {
				theObject.placeMarker( l );
				theObject.saveToInputField();
            });
		};
		
        this.placeMarker = function( location ) 
        {
            this.marker.setPosition( location );
            this.map.setCenter( location );
            this.map.panTo( location );
        };
        
        
        this.geocode = function(address, cb) 
        {
            var result;
            if (this.geocoder) {
                this.geocoder.geocode({"address": address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        cb(results[0].geometry.location);
                    }
                });
            }
        };
        
       this.geocode_reverse = function( cb) 
       {
            if (this.geocoder) {
                this.geocoder.geocode({"latLng": this.marker.getPosition() }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        cb( results );
                    }
                });
            }
        };
        
        this.saveToInputField = function()  
        {
        	var p = this.marker.getPosition();
        	coordinate_field.value =  p.lat().toFixed(6) + "," + p.lng().toFixed(6) + "," + this.map.getZoom() ;
	    };
        
	    this.loadFromInputField = function()
	    {
            if ( coordinate_field.value ) // Already values in the coordinate field
            {
                var l = coordinate_field.value.split(/,/);
                if (l.length > 1)
                {
                	this.placeMarker( new google.maps.LatLng(l[0], l[1]) );
                    this.map.setZoom( parseInt( l[2] ) );
                }
            }
            else
            {
            	this.placeMarker( init_position );
                this.map.setZoom( 16 );
            }
	    };
	    

		// --------------------------- Constructor -------------------------------------
        
        this.init = function()
        {
        	var theObject = this;
        	// Event handling
            google.maps.event.addListener( this.marker, 'dragend', function(mouseEvent) {
            	theObject.saveToInputField();
            });

            google.maps.event.addListener( this.map, 'click', function(mouseEvent){
            	theObject.placeMarker( mouseEvent.latLng );
            	theObject.saveToInputField();
            });
            
            google.maps.event.addListener( this.map, 'zoom_changed', function(mouseEvent){
            	theObject.saveToInputField();
            });
            
            theObject.loadFromInputField();
        };
        
        this.init();
    }
    
    
    $(".map_dialog").dialog( {
    	modal: true,
    	width: 650,
    	height: 730,
    	resizeable: false,
    	autoOpen: false
    } );
    
    $('input[data-location-widget]').click( function() {
    	
    	var formCoordField = $(this);
    	var $basedField     = $( formCoordField.attr('data-based-field') );
    	var $dialogElement  = $( formCoordField.attr('data-dialog-id') );
    	
       	var $dialogCoordField     = $dialogElement.find(".coordinate_input");
       	var $dialogLocationField  = $dialogElement.find(".displayed_location_input");
       	$dialogLocationField.val( $basedField.val() );
    	$dialogCoordField.val( formCoordField.val() );
    	
    	// Init Map if not yet initialized:
    	var map;
    	if ( ! $dialogElement[0].map )
		{
                map              = $( formCoordField.attr('data-map') )[0];
            var zoom             = parseInt( formCoordField.attr('data-zoom') );
            
            // Add Buttons
            $dialogElement.dialog( "option", "buttons", {
    			Abbrechen: function() {
	 	      	   $( this ).dialog( "close" );
	       		},
	 	        Ok: function() {
	       		   $(formCoordField).val( $dialogCoordField.val() );
	       		   $basedField.val( $dialogLocationField.val() );
	 	           $( this ).dialog( "close" );
	 	        } } 
            );

            // Init Map
    		$dialogElement[0].map = new MapObject( map, $dialogCoordField[0] );
		}
    	$dialogElement[0].map.placeMarkerUsingAddressString( $dialogLocationField.val() );
    	
		$dialogLocationField.on("keypress", function(e) {
				if ( e.keyCode === 13 ) { // enter
					$dialogElement[0].map.placeMarkerUsingAddressString( $dialogLocationField.val() );
					return false;
				}
			});
		
		$dialogElement.find(".coord_to_display_button").click( function() {
			$dialogElement[0].map.geocode_reverse(  function(result) {
				$dialogLocationField.val( result[0].formatted_address );
			});
		});

		
    	$dialogElement.dialog('open');
    });

});