Skip to content

Commit

Permalink
You can no longer tap to move the marker on mobile (drag map instead)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tam
Tam committed Jun 6, 2017
1 parent 633b2be commit c075ff5
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 48 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion simplemap/SimpleMapPlugin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ public function getDescription()

public function getVersion()
{
return '1.5.1';
return '1.6.0';
}

public function getSchemaVersion()
Expand Down
130 changes: 83 additions & 47 deletions simplemap/resources/SimpleMap_Map.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -65,7 +71,7 @@
return;
}

var self = this;
const self = this;

// Load Google APIs if they aren't already
if (typeof google === "undefined") {
Expand Down Expand Up @@ -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');
Expand All @@ -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") {
Expand Down Expand Up @@ -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 () {
Expand Down Expand Up @@ -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
),
Expand All @@ -219,7 +225,7 @@
*/
SimpleMap.prototype.setupMap = function () {
this.setup = true;
var self = this;
const self = this;

this.formatBoundary();

Expand Down Expand Up @@ -251,35 +257,48 @@

// 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();

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

Expand All @@ -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};
Expand All @@ -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;
Expand All @@ -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();
Expand All @@ -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();
});
Expand All @@ -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();
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -424,20 +445,18 @@
* @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();

if (!this.updateByAddress) {
// 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();
});
}

Expand All @@ -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) {
Expand Down Expand Up @@ -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
*
Expand Down

0 comments on commit c075ff5

Please sign in to comment.