httemplate/elements/jquery-gmaps-latlon-picker.js

   1 /**\r
   2  *\r
   3  * A JQUERY GOOGLE MAPS LATITUDE AND LONGITUDE LOCATION PICKER\r
   4  * version 1.2\r
   5  *\r
   6  * Supports multiple maps. Works on touchscreen. Easy to customize markup and CSS.\r
   7  *\r
   8  * To see a live demo, go to:\r
   9  * http://www.wimagguc.com/projects/jquery-latitude-longitude-picker-gmaps/\r
  10  *\r
  11  * by Richard Dancsi\r
  12  * http://www.wimagguc.com/\r
  13  *\r
  14  */\r
  15 \r
  16 (function($) {\r
  17 \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
  21 // ^^^\r
  22 \r
  23 /* local modification */\r
  24 window.gMapsLatLonPickerState = {};\r
  25 \r
  26 $.fn.gMapsLatLonPicker = (function() {\r
  27 \r
  28         var _self = this;\r
  29 \r
  30         ///////////////////////////////////////////////////////////////////////////////////////////////\r
  31         // PARAMETERS (MODIFY THIS PART) //////////////////////////////////////////////////////////////\r
  32         _self.params = {\r
  33                 defLat : 0,\r
  34                 defLng : 0,\r
  35                 defZoom : 1,\r
  36                 queryLocationNameWhenLatLngChanges: true,\r
  37                 queryElevationWhenLatLngChanges: true,\r
  38                 mapOptions : {\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
  45                 },\r
  46                 strings : {\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
  50                 }\r
  51         };\r
  52 \r
  53 \r
  54         ///////////////////////////////////////////////////////////////////////////////////////////////\r
  55         // VARIABLES USED BY THE FUNCTION (DON'T MODIFY THIS PART) ////////////////////////////////////\r
  56         _self.vars = {\r
  57                 ID : null,\r
  58                 LATLNG : null,\r
  59                 map : null,\r
  60                 marker : null,\r
  61                 geocoder : null\r
  62         };\r
  63 \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
  69 \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
  73 \r
  74                 $(_self.vars.cssID).trigger("location_changed", $(_self.vars.cssID));\r
  75 \r
  76                 if (_self.params.queryLocationNameWhenLatLngChanges) {\r
  77                         getLocationName(position);\r
  78                 }\r
  79                 if (_self.params.queryElevationWhenLatLngChanges) {\r
  80                         getElevation(position);\r
  81                 }\r
  82         };\r
  83 \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
  90                         } else {\r
  91                                 $(_self.vars.cssID + ".gllpLocationName").val("");\r
  92                         }\r
  93                         $(_self.vars.cssID).trigger("location_name_changed", $(_self.vars.cssID));\r
  94                 });\r
  95         };\r
  96 \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
 100 \r
 101                 var locations = [latlng];\r
 102 \r
 103                 var positionalRequest = { 'locations': locations };\r
 104 \r
 105                 _self.vars.elevator.getElevationForLocations(positionalRequest, function(results, status) {\r
 106                         if (status == google.maps.ElevationStatus.OK) {\r
 107                                 if (results[0]) {\r
 108                                         $(_self.vars.cssID + ".gllpElevation").val( results[0].elevation.toFixed(3));\r
 109                                 } else {\r
 110                                         $(_self.vars.cssID + ".gllpElevation").val("");\r
 111                                 }\r
 112                         } else {\r
 113                                 $(_self.vars.cssID + ".gllpElevation").val("");\r
 114                         }\r
 115                         $(_self.vars.cssID).trigger("elevation_changed", $(_self.vars.cssID));\r
 116                 });\r
 117         };\r
 118 \r
 119         // search function\r
 120         var performSearch = function(string, silent) {\r
 121                 if (string == "") {\r
 122                         if (!silent) {\r
 123                                 displayError( _self.params.strings.error_empty_field );\r
 124                         }\r
 125                         return;\r
 126                 }\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
 134                                 } else {\r
 135                                         if (!silent) {\r
 136                                                 displayError( _self.params.strings.error_no_results );\r
 137                                         }\r
 138                                 }\r
 139                         }\r
 140                 );\r
 141         };\r
 142 \r
 143         // error function\r
 144         var displayError = function(message) {\r
 145                 alert(message);\r
 146         };\r
 147 \r
 148         ///////////////////////////////////////////////////////////////////////////////////////////////\r
 149         // PUBLIC FUNCTIONS  //////////////////////////////////////////////////////////////////////////\r
 150         var publicfunc = {\r
 151 \r
 152                 // INITIALIZE MAP ON DIV //////////////////////////////////////////////////////////////////\r
 153                 init : function(object) {\r
 154 \r
 155                         if ( !$(object).attr("id") ) {\r
 156                                 if ( $(object).attr("name") ) {\r
 157                                         $(object).attr("id", $(object).attr("name") );\r
 158                                 } else {\r
 159                                         $(object).attr("id", "_MAP_" + Math.ceil(Math.random() * 10000) );\r
 160                                 }\r
 161                         }\r
 162 \r
 163                         _self.vars.ID = $(object).attr("id");\r
 164                         _self.vars.cssID = "#" + _self.vars.ID + " ";\r
 165 \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
 169 \r
 170                         _self.vars.LATLNG = new google.maps.LatLng(_self.params.defLat, _self.params.defLng);\r
 171 \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
 175 \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
 179 \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
 184                                 draggable: true\r
 185                         });\r
 186 \r
 187                         // Set position on doubleclick\r
 188                         google.maps.event.addListener(_self.vars.map, 'dblclick', function(event) {\r
 189                                 setPosition(event.latLng);\r
 190                         });\r
 191 \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
 195                         });\r
 196 \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
 201                         });\r
 202 \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
 210                         });\r
 211 \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
 215                         });\r
 216 \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
 220                         });\r
 221 \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
 229                         });\r
 230 \r
 231       /* local modification */\r
 232       window.gMapsLatLonPickerState[_self.vars.ID] =\r
 233       {\r
 234         vars : _self.vars,\r
 235         params : _self.params\r
 236       };\r
 237     } // publicfunc\r
 238 \r
 239         }\r
 240 \r
 241         return publicfunc;\r
 242 });\r
 243 \r
 244 }(jQuery));\r
 245 \r
 246 $(document).ready( function() {\r
 247         $(".gllpLatlonPicker").each(function() {\r
 248                 $(document).gMapsLatLonPicker().init( $(this) );\r
 249         });\r
 250 });\r
 251 \r
 252 $(document).bind("location_changed", function(event, object) {\r
 253         console.log("changed: " + $(object).attr('id') );\r
 254 });\r