($ || 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'); }); });