3 * A JQUERY GOOGLE MAPS LATITUDE AND LONGITUDE LOCATION PICKER
\r
6 * Supports multiple maps. Works on touchscreen. Easy to customize markup and CSS.
\r
8 * To see a live demo, go to:
\r
9 * http://www.wimagguc.com/projects/jquery-latitude-longitude-picker-gmaps/
\r
12 * http://www.wimagguc.com/
\r
18 // for ie9 doesn't support debug console >>>
\r
19 if (!window.console) window.console = {};
\r
20 if (!window.console.log) window.console.log = function () { };
\r
23 /* local modification */
\r
24 window.gMapsLatLonPickerState = {};
\r
26 $.fn.gMapsLatLonPicker = (function() {
\r
30 ///////////////////////////////////////////////////////////////////////////////////////////////
\r
31 // PARAMETERS (MODIFY THIS PART) //////////////////////////////////////////////////////////////
\r
36 queryLocationNameWhenLatLngChanges: true,
\r
37 queryElevationWhenLatLngChanges: true,
\r
39 mapTypeId: google.maps.MapTypeId.ROADMAP,
\r
40 /* local modification */
\r
41 //mapTypeControl: false,
\r
42 disableDoubleClickZoom: true,
\r
43 zoomControlOptions: true,
\r
44 streetViewControl: false
\r
47 markerText : "Drag this Marker",
\r
48 error_empty_field : "Couldn't find coordinates for this place",
\r
49 error_no_results : "Couldn't find coordinates for this place"
\r
54 ///////////////////////////////////////////////////////////////////////////////////////////////
\r
55 // VARIABLES USED BY THE FUNCTION (DON'T MODIFY THIS PART) ////////////////////////////////////
\r
64 ///////////////////////////////////////////////////////////////////////////////////////////////
\r
65 // PRIVATE FUNCTIONS FOR MANIPULATING DATA ////////////////////////////////////////////////////
\r
66 var setPosition = function(position) {
\r
67 _self.vars.marker.setPosition(position);
\r
68 _self.vars.map.panTo(position);
\r
70 $(_self.vars.cssID + ".gllpZoom").val( _self.vars.map.getZoom() );
\r
71 $(_self.vars.cssID + ".gllpLongitude").val( position.lng() );
\r
72 $(_self.vars.cssID + ".gllpLatitude").val( position.lat() );
\r
74 $(_self.vars.cssID).trigger("location_changed", $(_self.vars.cssID));
\r
76 if (_self.params.queryLocationNameWhenLatLngChanges) {
\r
77 getLocationName(position);
\r
79 if (_self.params.queryElevationWhenLatLngChanges) {
\r
80 getElevation(position);
\r
84 // for reverse geocoding
\r
85 var getLocationName = function(position) {
\r
86 var latlng = new google.maps.LatLng(position.lat(), position.lng());
\r
87 _self.vars.geocoder.geocode({'latLng': latlng}, function(results, status) {
\r
88 if (status == google.maps.GeocoderStatus.OK && results[1]) {
\r
89 $(_self.vars.cssID + ".gllpLocationName").val(results[1].formatted_address);
\r
91 $(_self.vars.cssID + ".gllpLocationName").val("");
\r
93 $(_self.vars.cssID).trigger("location_name_changed", $(_self.vars.cssID));
\r
97 // for getting the elevation value for a position
\r
98 var getElevation = function(position) {
\r
99 var latlng = new google.maps.LatLng(position.lat(), position.lng());
\r
101 var locations = [latlng];
\r
103 var positionalRequest = { 'locations': locations };
\r
105 _self.vars.elevator.getElevationForLocations(positionalRequest, function(results, status) {
\r
106 if (status == google.maps.ElevationStatus.OK) {
\r
108 $(_self.vars.cssID + ".gllpElevation").val( results[0].elevation.toFixed(3));
\r
110 $(_self.vars.cssID + ".gllpElevation").val("");
\r
113 $(_self.vars.cssID + ".gllpElevation").val("");
\r
115 $(_self.vars.cssID).trigger("elevation_changed", $(_self.vars.cssID));
\r
120 var performSearch = function(string, silent) {
\r
121 if (string == "") {
\r
123 displayError( _self.params.strings.error_empty_field );
\r
127 _self.vars.geocoder.geocode(
\r
128 {"address": string},
\r
129 function(results, status) {
\r
130 if (status == google.maps.GeocoderStatus.OK) {
\r
131 $(_self.vars.cssID + ".gllpZoom").val(11);
\r
132 _self.vars.map.setZoom( parseInt($(_self.vars.cssID + ".gllpZoom").val()) );
\r
133 setPosition( results[0].geometry.location );
\r
136 displayError( _self.params.strings.error_no_results );
\r
144 var displayError = function(message) {
\r
148 ///////////////////////////////////////////////////////////////////////////////////////////////
\r
149 // PUBLIC FUNCTIONS //////////////////////////////////////////////////////////////////////////
\r
152 // INITIALIZE MAP ON DIV //////////////////////////////////////////////////////////////////
\r
153 init : function(object) {
\r
155 if ( !$(object).attr("id") ) {
\r
156 if ( $(object).attr("name") ) {
\r
157 $(object).attr("id", $(object).attr("name") );
\r
159 $(object).attr("id", "_MAP_" + Math.ceil(Math.random() * 10000) );
\r
163 _self.vars.ID = $(object).attr("id");
\r
164 _self.vars.cssID = "#" + _self.vars.ID + " ";
\r
166 _self.params.defLat = $(_self.vars.cssID + ".gllpLatitude").val() ? $(_self.vars.cssID + ".gllpLatitude").val() : _self.params.defLat;
\r
167 _self.params.defLng = $(_self.vars.cssID + ".gllpLongitude").val() ? $(_self.vars.cssID + ".gllpLongitude").val() : _self.params.defLng;
\r
168 _self.params.defZoom = $(_self.vars.cssID + ".gllpZoom").val() ? parseInt($(_self.vars.cssID + ".gllpZoom").val()) : _self.params.defZoom;
\r
170 _self.vars.LATLNG = new google.maps.LatLng(_self.params.defLat, _self.params.defLng);
\r
172 _self.vars.MAPOPTIONS = _self.params.mapOptions;
\r
173 _self.vars.MAPOPTIONS.zoom = _self.params.defZoom;
\r
174 _self.vars.MAPOPTIONS.center = _self.vars.LATLNG;
\r
176 _self.vars.map = new google.maps.Map($(_self.vars.cssID + ".gllpMap").get(0), _self.vars.MAPOPTIONS);
\r
177 _self.vars.geocoder = new google.maps.Geocoder();
\r
178 _self.vars.elevator = new google.maps.ElevationService();
\r
180 _self.vars.marker = new google.maps.Marker({
\r
181 position: _self.vars.LATLNG,
\r
182 map: _self.vars.map,
\r
183 title: _self.params.strings.markerText,
\r
187 // Set position on doubleclick
\r
188 google.maps.event.addListener(_self.vars.map, 'dblclick', function(event) {
\r
189 setPosition(event.latLng);
\r
192 // Set position on marker move
\r
193 google.maps.event.addListener(_self.vars.marker, 'dragend', function(event) {
\r
194 setPosition(_self.vars.marker.position);
\r
197 // Set zoom feld's value when user changes zoom on the map
\r
198 google.maps.event.addListener(_self.vars.map, 'zoom_changed', function(event) {
\r
199 $(_self.vars.cssID + ".gllpZoom").val( _self.vars.map.getZoom() );
\r
200 $(_self.vars.cssID).trigger("location_changed", $(_self.vars.cssID));
\r
203 // Update location and zoom values based on input field's value
\r
204 $(_self.vars.cssID + ".gllpUpdateButton").bind("click", function() {
\r
205 var lat = $(_self.vars.cssID + ".gllpLatitude").val();
\r
206 var lng = $(_self.vars.cssID + ".gllpLongitude").val();
\r
207 var latlng = new google.maps.LatLng(lat, lng);
\r
208 _self.vars.map.setZoom( parseInt( $(_self.vars.cssID + ".gllpZoom").val() ) );
\r
209 setPosition(latlng);
\r
212 // Search function by search button
\r
213 $(_self.vars.cssID + ".gllpSearchButton").bind("click", function() {
\r
214 performSearch( $(_self.vars.cssID + ".gllpSearchField").val(), false );
\r
217 // Search function by gllp_perform_search listener
\r
218 $(document).bind("gllp_perform_search", function(event, object) {
\r
219 performSearch( $(object).attr('string'), true );
\r
222 // Zoom function triggered by gllp_perform_zoom listener
\r
223 $(document).bind("gllp_update_fields", function(event) {
\r
224 var lat = $(_self.vars.cssID + ".gllpLatitude").val();
\r
225 var lng = $(_self.vars.cssID + ".gllpLongitude").val();
\r
226 var latlng = new google.maps.LatLng(lat, lng);
\r
227 _self.vars.map.setZoom( parseInt( $(_self.vars.cssID + ".gllpZoom").val() ) );
\r
228 setPosition(latlng);
\r
231 /* local modification */
\r
232 window.gMapsLatLonPickerState[_self.vars.ID] =
\r
235 params : _self.params
\r
246 $(document).ready( function() {
\r
247 $(".gllpLatlonPicker").each(function() {
\r
248 $(document).gMapsLatLonPicker().init( $(this) );
\r
252 $(document).bind("location_changed", function(event, object) {
\r
253 console.log("changed: " + $(object).attr('id') );
\r