From c075ff530f41dac7306d292a018564fe60af5f3d Mon Sep 17 00:00:00 2001 From: Tam Date: Tue, 6 Jun 2017 12:26:18 +0100 Subject: [PATCH] You can no longer tap to move the marker on mobile (drag map instead) --- README.md | 3 + simplemap/SimpleMapPlugin.php | 2 +- simplemap/resources/SimpleMap_Map.js | 130 +++++++++++++++++---------- 3 files changed, 87 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index ec18c87..fc2fff1 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,9 @@ var map = new mapboxgl.Map({ ## Changelog +### 1.6.0 +- + ### 1.5.1 - Fixed the Lat/Lng inputs not accepting decimals in Chrome #36 diff --git a/simplemap/SimpleMapPlugin.php b/simplemap/SimpleMapPlugin.php index 2659a68..e6c1b80 100644 --- a/simplemap/SimpleMapPlugin.php +++ b/simplemap/SimpleMapPlugin.php @@ -24,7 +24,7 @@ public function getDescription() public function getVersion() { - return '1.5.1'; + return '1.6.0'; } public function getSchemaVersion() diff --git a/simplemap/resources/SimpleMap_Map.js b/simplemap/resources/SimpleMap_Map.js index 7e76a07..c175a25 100644 --- a/simplemap/resources/SimpleMap_Map.js +++ b/simplemap/resources/SimpleMap_Map.js @@ -1,15 +1,21 @@ ;(function (window) { + const __MOBILE__ = (function() { + let check = false; + (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); + return check; + })(); + /** * SimpleMap Class * * @param {string} key - Google Maps API key * @param {string} mapId - Map field ID - * @param {object} settings - The map seetings object + * @param {object} settings - The map settings object * @param {string} locale - The entries locale * @constructor */ - var SimpleMap = function (key, mapId, settings, locale) { + const SimpleMap = function (key, mapId, settings, locale) { if (!key) { SimpleMap.Fail('Missing API Key!'); return; @@ -65,7 +71,7 @@ return; } - var self = this; + const self = this; // Load Google APIs if they aren't already if (typeof google === "undefined") { @@ -100,8 +106,8 @@ document.getElementById('tabs').getElementsByTagName('a') ).map(function (el) { el.addEventListener('click', function () { - var x = self.map.getZoom(), - c = self.map.getCenter(); + const x = self.map.getZoom() + , c = self.map.getCenter(); setTimeout(function () { google.maps.event.trigger(self.map, 'resize'); @@ -119,7 +125,7 @@ * @param {string} key - Google Maps API key */ SimpleMap.prototype.AutoCompleteOnly = function (key) { - var self = this; + const self = this; // Load Google APIs if they aren't already if (typeof google === "undefined") { @@ -167,7 +173,7 @@ SimpleMap.LoadGoogleAPI = function (key, locale) { window.simpleMapsLoadingGoogle = true; - var gmjs = document.createElement('script'); + const gmjs = document.createElement('script'); gmjs.type = 'text/javascript'; gmjs.src = 'https://www.google.com/jsapi?key=' + key; gmjs.onreadystatechange = function () { @@ -202,7 +208,7 @@ */ SimpleMap.prototype.formatBoundary = function () { if (this.settings.boundary !== '') { - var ne = new google.maps.LatLng( + const ne = new google.maps.LatLng( this.settings.boundary.ne.lat, this.settings.boundary.ne.lng ), @@ -219,7 +225,7 @@ */ SimpleMap.prototype.setupMap = function () { this.setup = true; - var self = this; + const self = this; this.formatBoundary(); @@ -251,9 +257,9 @@ // Get the initial lat/lng/zoom, // falling back to defaults if we don't have one - var lat = this.inputs.lat.value || this.settings.lat, - lng = this.inputs.lng.value || this.settings.lng, - zoom = this.inputs.zoom.value || this.settings.zoom; + const lat = this.inputs.lat.value || this.settings.lat + , lng = this.inputs.lng.value || this.settings.lng + , zoom = this.inputs.zoom.value || this.settings.zoom; // Update the marker location & center the map this.update(lat, lng, false, true).center(); @@ -261,25 +267,38 @@ // Update map to saved zoom this.map.setZoom(parseInt(zoom)); - // When the marker is dropped - google.maps.event.addListener(this.map.marker, 'dragend', function () { - self.sync(true); - }); - - // When map is clicked - google.maps.event.addListener(this.map, 'click', function (e) { + if (__MOBILE__) { + // Hide the marker + this.map.marker.setVisible(false); - var lat = e.latLng.lat(), - lng = e.latLng.lng(); + // Add a custom marker + this.addCentredMarker(); - self.update(lat, lng).sync(); - }); + // If we're on mobile, lock the marker to the centre and use the + // drag to position it + google.maps.event.addListener(this.map, 'dragend', function () { + const center = self.map.getCenter(); + self.update(center.lat(), center.lng()).sync(); + }); + } else { + // When the marker is dropped + google.maps.event.addListener(this.map.marker, 'dragend', function () { + self.sync(true); + }); + + // When map is clicked + google.maps.event.addListener(this.map, 'click', function (e) { + + const lat = e.latLng.lat() + , lng = e.latLng.lng(); + + self.update(lat, lng).sync(); + }); + } // When the zoom is changed google.maps.event.addListener(this.map, 'zoom_changed', function () { - var zoom = this.getZoom(); - - self.updateZoom(zoom).center(); + self.updateZoom(this.getZoom()).center(); }); }; @@ -292,10 +311,10 @@ this.formatBoundary(); } if (!this.geocoder) this.geocoder = new google.maps.Geocoder(); - var self = this; + const self = this; // Setup address search - var opts = {}; + const opts = {}; if (this.settings.country !== '') opts.componentRestrictions = {country: this.settings.country}; @@ -306,8 +325,10 @@ if (this.settings.boundary !== '') opts.bounds = this.settings.boundary; - var autocomplete = - new google.maps.places.Autocomplete(this.address, opts); + const autocomplete = new google.maps.places.Autocomplete( + this.address, + opts + ); if (!this.settings.hideMap) { autocomplete.map = this.map; @@ -327,12 +348,12 @@ // When the auto-complete place changes google.maps.event.addListener(autocomplete, 'place_changed', function () { - var address = self.address.value, lat, lng; + let address = self.address.value, lat, lng; self.updateByAddress = true; // If we have a place - var place = this.getPlace(); + const place = this.getPlace(); if (place && place.geometry) { lat = place.geometry.location.lat(); @@ -345,8 +366,8 @@ // If the client hit enter, search self.geo(address, function (loc) { - var lat = loc.geometry.location.lat(), - lng = loc.geometry.location.lng(); + const lat = loc.geometry.location.lat() + , lng = loc.geometry.location.lng(); self.update(lat, lng).sync().center(); }); @@ -358,8 +379,8 @@ * Updates the maps location when the Lat/Lng fields change */ SimpleMap.prototype.onLatLngChange = function () { - var lat = this.inputs.lat.value, - lng = this.inputs.lng.value; + const lat = this.inputs.lat.value + , lng = this.inputs.lng.value; this.update(lat, lng, false, true); this.center(); @@ -377,7 +398,7 @@ * @return {SimpleMap} */ SimpleMap.prototype.update = function (lat, lng, leaveMarker, leaveFields) { - var latLng = new google.maps.LatLng(lat, lng); + const latLng = new google.maps.LatLng(lat, lng); if (!leaveFields) { this.inputs.lat.value = lat; @@ -386,7 +407,7 @@ if (!leaveMarker && !this.settings.hideMap) { this.map.marker.setPosition(latLng); - this.map.marker.setVisible(true); + this.map.marker.setVisible(!__MOBILE__); } return this; @@ -424,8 +445,8 @@ * @return {SimpleMap} */ SimpleMap.prototype.sync = function (update) { - var self = this, - pos = this.settings.hideMap + const self = this + , pos = this.settings.hideMap ? new google.maps.LatLng(this.inputs.lat.value, this.inputs.lng.value) : this.map.marker.getPosition(); @@ -433,11 +454,9 @@ // Update address / lat / lng based off marker location this.geo(pos, function (loc) { // if loc, set address to formatted_location, else to position - var address = - loc ? loc.formatted_address : pos.lat() + ", " + pos.lng(); - // update address value - self.address.value = address; + self.address.value = loc + ? loc.formatted_address : pos.lat() + ", " + pos.lng(); }); } @@ -458,12 +477,13 @@ if (typeof tryNumber === typeof undefined) tryNumber = 0; - var attr = {'latLng': latLng}, - self = this; + const self = this; + + let attr = {'latLng': latLng}; if (!latLng.lat) attr = {'address': latLng}; this.geocoder.geocode(attr, function (results, status) { - var loc; + let loc; // if location available, set loc to first result if (status === google.maps.GeocoderStatus.OK) { @@ -502,6 +522,22 @@ this.address.value = ''; }; + SimpleMap.prototype.addCentredMarker = function () { + const marker = document.createElement("img"); + marker.src = "https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png"; + marker.setAttribute( + "srcset", + "https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png 1x, https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png 2x" + ); + marker.style.position = "absolute"; + marker.style.zIndex = 3; + marker.style.top = "50%"; + marker.style.left = "50%"; + marker.style.transform = "translate3d(-50%, -100%, 0)"; + + this.mapEl.insertBefore(marker, this.mapEl.firstElementChild); + }; + /** * The SimpleMap.prototype.geo callback *