[Summary view] [Print] [Text view]

   1  function mp_field_type_geotag(settings)
   2  {
   3      this.map    = null;
   4  
   5      this.settings     = settings;
   6      this.prefix     = 'mp_' + this.settings.form + '_' + this.settings.field;
   7      this.suffix      = '_' + this.settings.form + '_' + this.settings.field;
   8  
   9      this.center_lat    = jQuery('#' + this.prefix + '_center_lat');
  10      this.center_lng    = jQuery('#' + this.prefix + '_center_lng');
  11  
  12      this.zoomlevel     = jQuery('#' + this.prefix + '_zoomlevel');
  13      this.maptype      = jQuery('#' + this.prefix + '_maptype');
  14  
  15      this.container     = document.getElementById(this.prefix + '_map');
  16  
  17      this.lat     = jQuery('#' + this.prefix + '_lat,#' + this.prefix + '_lat_d');
  18      this.lng     = jQuery('#' + this.prefix + '_lng,#' + this.prefix + '_lng_d');
  19      this.rgeocode     = jQuery('#' + this.prefix + '_geocode');
  20  
  21      this.infowindow = false;
  22  
  23  
  24      this.init = function() {
  25  
  26          this.center = this.getLatLng(this.setLoLa(this.settings.center_lng, this.settings.center_lat));
  27  
  28          var myOptions = {
  29              center:        this.center,
  30              zoom:         parseInt(this.zoomlevel.val()),
  31              mapTypeId:     this.get_maptype(this.maptype.val()),
  32  
  33              gestureHandling:     'greedy',
  34              draggable:        true,
  35  
  36              disableDefaultUI:     true,
  37              zoomControl:    (    this.settings.zoom == 1),
  38              zoomControlOptions:     {style:'SMALL'},
  39              mapTypeControl:        false,
  40              panControl:        false,
  41              streetViewControl:    false,
  42          };
  43  
  44          this.map = new google.maps.Map(this.container, myOptions);
  45  
  46          this.setMarker();
  47          this.setEvents();
  48                 this.setControls();
  49      };
  50  
  51      this.sanitize = function(x) {
  52          x = parseFloat(x);
  53          return x.toFixed(8);
  54      };
  55  
  56      this.setLoLa = function(lng, lat) {
  57          return { lo: this.sanitize(lng), la: this.sanitize(lat) };
  58      };
  59  
  60      this.getLoLa = function(LatLng) {
  61          return { lo: this.sanitize(LatLng.lng()), la: this.sanitize(LatLng.lat()) };
  62      };
  63  
  64      this.getLatLng = function(LoLa) {
  65          return new google.maps.LatLng(LoLa.la, LoLa.lo);
  66      };
  67  
  68      this.setCenter = function() {
  69          var LoLa = this.getLoLa(this.marker.getPosition());
  70  
  71          this.map.setCenter(this.getLatLng(LoLa));
  72          this.center_lat.val(LoLa.la);
  73          this.center_lng.val(LoLa.lo);
  74      };
  75  
  76      this.setMarker = function() {
  77  
  78          var mkOptions = { position: this.center, map: this.map, draggable: true };
  79          this.marker = new google.maps.Marker(mkOptions);
  80      };
  81  
  82      this.moveMarker = function(LoLa) {
  83                  this.hideMarkerInfo();
  84          this.marker.setPosition(this.getLatLng(LoLa));
  85          this.lat.val(LoLa.la);
  86          this.lng.val(LoLa.lo);
  87  
  88          this.setCenter();
  89      };
  90  
  91      this.showMarkerInfo = function(LatLng, data) {
  92          this.infowindow = new google.maps.InfoWindow({content:data});
  93          this.infowindow.open(this.map, this.marker);
  94      };
  95  
  96      this.hideMarkerInfo = function() {
  97          if (this.infowindow) this.infowindow.close();
  98      };
  99  
 100      this.get_maptype = function(maptype) {
 101                  var s = v = null;
 102          switch(maptype)
 103          {
 104              case 'SATELLITE': s = google.maps.MapTypeId.SATELLITE;    break;
 105              case 'HYBRID'     : s = google.maps.MapTypeId.HYBRID;    break;
 106              case 'TERRAIN'    : s = google.maps.MapTypeId.TERRAIN;    break;
 107              default         : s = google.maps.MapTypeId.ROADMAP;    break;
 108          }
 109          return s;
 110      };
 111  
 112      this.setEvents = function() {
 113          // map
 114          google.maps.event.addListener(_this.map, 'click', function() {
 115              -this.hideMarkerInfo();
 116          });
 117  
 118          google.maps.event.addListener(_this.map, 'dragend', function() {
 119              var LoLa = _this.getLoLa(_this.map.getCenter());
 120              _this.center_lat.val(LoLa.la);
 121              _this.center_lng.val(LoLa.lo);
 122          });
 123  
 124          google.maps.event.addListener(this.map, 'zoom_changed', function() {
 125              _this.zoomlevel.val(parseInt(_this.map.getZoom()));
 126          });
 127  
 128          // marker
 129          google.maps.event.addListener(this.marker, 'drag', function() {
 130              _this.hideMarkerInfo();
 131              var LoLa = _this.getLoLa(this.getPosition());
 132              _this.lat.val(LoLa.la);
 133              _this.lng.val(LoLa.lo);
 134          });
 135  
 136          google.maps.event.addListener(this.marker, 'dragend', function() {
 137              var LoLa = _this.getLoLa(this.getPosition());
 138              _this.lat.val(LoLa.la);
 139              _this.lng.val(LoLa.lo);
 140          });
 141  
 142          // geocoder
 143          this.geocoder = new google.maps.Geocoder();
 144  
 145          jQuery('#' + this.prefix + '_geocode_button').click( function() {
 146              var address = jQuery('#' + _this.prefix + '_geocode').val();
 147  
 148              _this.geocoder.geocode( {'address': address}, function(results, status) {
 149                  if (status == google.maps.GeocoderStatus.OK) {
 150                      var LoLa = _this.getLoLa(results[0].geometry.location);
 151                      _this.moveMarker(LoLa);
 152                  } else {
 153                      alert("Geocoder failed due to: " + status);
 154                  }
 155              });
 156          });
 157  
 158      };
 159  
 160      this.setControls = function() {
 161  
 162          if ( 0 == this.settings.changemap+this.settings.center+this.settings.rgeocode ) return;
 163  
 164          var container = document.createElement('div');
 165          container.setAttribute('class', 'google-ctrl google-ctrl-group');
 166  
 167          if ( 1 == this.settings.changemap ) {
 168              var button = document.createElement('button');
 169               button.setAttribute('type', 'button');
 170              button.setAttribute('id',   'map_control'+this.settings.suffix);
 171              button.setAttribute('class','google-ctrl-icon map_control');
 172              button.setAttribute('alt',   mp_mapL10n.changemap);
 173              button.setAttribute('title', mp_mapL10n.changemap);
 174                container.appendChild(button);
 175  
 176                google.maps.event.addDomListener(button, 'click', function(){
 177                         switch (_this.maptype.val())
 178                         {
 179                             case 'ROADMAP' : _this.maptype.val('SATELLITE'); break;
 180                             case 'SATELLITE' : _this.maptype.val('HYBRID');  break;
 181                             case 'HYBRID' : _this.maptype.val('TERRAIN');    break;
 182                             default:     _this.maptype.val('ROADMAP');    break;
 183                              }
 184                              var s = _this.get_maptype(_this.maptype.val());
 185                  _this.map.setMapTypeId(s);
 186                  return false;
 187              });
 188          }
 189  
 190          if ( 1 == this.settings.center ) {
 191              button = document.createElement('button');
 192              button.setAttribute('type', 'button');
 193              button.setAttribute('id',   'map_center'+this.settings.suffix);
 194              button.setAttribute('class','google-ctrl-icon map_center');
 195              button.setAttribute('alt',   mp_mapL10n.center);
 196              button.setAttribute('title', mp_mapL10n.center);
 197               container.appendChild(button);
 198  
 199                google.maps.event.addDomListener(button, 'click', function(){
 200                  _this.setCenter();
 201                  return false;
 202              });
 203          }
 204  
 205  
 206          if ( 1 == this.settings.rgeocode ) {
 207              button = document.createElement('button');
 208              button.setAttribute('type', 'button');
 209              button.setAttribute('id',   'map_geocode'+this.settings.suffix);
 210              button.setAttribute('class', 'google-ctrl-icon map_geocode');
 211              button.setAttribute('alt',   mp_mapL10n.rgeocode);
 212              button.setAttribute('title', mp_mapL10n.rgeocode);
 213               container.appendChild(button);
 214  
 215                google.maps.event.addDomListener(button, 'click', function(){
 216                  _this.geocoder.geocode( {'location': _this.marker.getPosition()}, function(results, status) {
 217                      if (status === 'OK') {
 218                          if (results[0]) {
 219                              _this.setCenter();
 220                              _this.showMarkerInfo(_this.marker.getPosition(), results[0].formatted_address);
 221                          } else {
 222                              alert("No result found");
 223                          }
 224                      } else {
 225                          alert("Geocoder failed due to: " + status);
 226                      }
 227                      return false;
 228                  });
 229              });
 230          }
 231  
 232          this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(container);
 233      };
 234  
 235      var _this = this;
 236  
 237      this.init();
 238  }