wordpress-geo-mashup
wordpress-geo-mashup copied to clipboard
cyberhobo
[Feature Request] - GPS/"Locate Me" button
Great work on Geo Mashup! Lots of useful feature. But one most important thing
is missing from it...
Under "Find a new location" - I think it would be awesome to have an "Locate
Me!" button where it could get my location from my mobile phone's GPS and it
would get the lat/long added to it.
I believe this can be done with JavaScript however I'm not knowledgeable enough
to hack this together.
Is this do-able for this awesome plug-in?
[posted here as requested by dylan]
Original issue reported on code.google.com by [email protected] on 15 Jul 2013 at 9:28
I like this idea, especially if we could reuse some of the code from the "find
me" geo search button. I can't jump on it right away, but would be happy to
review contributions.
Original comment by [email protected] on 16 Jul 2013 at 2:04
- Changed state: Accepted
- Added labels: Type-Enhancement
I got mobile GPS automatic location and explorers.
Download geo mashup plugin custom and within the same folder make a file called
custom-googlev3.js with the following code inside.
This will work with the version of google v3 only and with the global map.
This is my code in custom-googlev3.js:
GeoMashup.addAction( 'loadedMap', function( properties, mxn ) {
var pointerz;
var geomarker;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag = new Boolean();
if ( properties.map_content == 'global' ) {
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
var iconBase = 'miubicacion.png';
var pointerz = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var google_map = mxn.getMap();
geomarker = new google.maps.Marker({
position: pointerz,
map: google_map,
icon: iconBase,
title:"Mi ubicacion"
});
geomarker.setMap(google_map);
google_map.setZoom(12)
google_map.setCenter( pointerz );
}, function() {
handleNoGeolocation(browserSupportFlag);
}); return;
}
// Try Google Gears Geolocation
} else if (google.gears) {
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
var pointerz = new google.maps.LatLng(-25.363882, 131.044922);
var google_map = mxn.getMap();
geomarker = new google.maps.Marker({
position: pointerz,
map: google_map,
title:"Mi ubicacion"
});
// To add the marker to the map, call setMap();
geomarker.setMap(google_map);
google_map.setZoom(12)
google_map.setCenter( pointerz );
}, function() {
handleNoGeoLocation(browserSupportFlag);
});
// Browser doesn't support Geolocation
} else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
initialLocation = newyork;
} else {
initialLocation = siberia;
}
map.setCenter(initialLocation);
}
},false);
Original comment by [email protected] on 20 Sep 2013 at 8:50
Attachments:
Hello,
Thanks for your code. It's working perfectly.
In adition, do you know how it would be possible to zoom in to precise
position. I mean, you are correctly localized on the map while walking with
your phone and you want to know where are the localized pages. It would be
interesting to click on a link that focus on a predefined area where articles
are positioned.
Is it possible to do that ?
Original comment by [email protected] on 27 May 2014 at 10:01
It doesn't work for me.
I've uploaded JS file into /plugins/geo-mashup/ directory, then loaded a
global map but nothing is happens.
Original comment by [email protected] on 27 Nov 2014 at 9:12
Hi everyone,
I'd like to add a GPS and IP/ Find me button on contextual map.
Can anyone do this for me?
If your interested, send me email
It's old topic but I would like to say that is quite easy with leaflet library.
In geo mashup 1.12.0, leaflet is updated to latest version. So it's possible to use official locatecontrol plugin of the leaflet.
I just added these lines in my geo-mashup-map-frame.php :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
and added this code in the custom-mxn.js:
GeoMashup.addAction( 'loadedMap', function ( properties, mxn ) {
var leaflet_map = mxn.getMap();
L.control.locate({position:'bottomleft'}).addTo(leaflet_map);
} );
That's all. It works perfectly. @cyberhobo Maybe it would be nice to include this feature. It's really useful specially with "visible_posts_list".
Thanks for the example! It would be a good feature, especially if I could get something working with the other providers also.
If anyone else is searching for this, this is how I got the 'New Post' page to use the browser API to detect my location:
I added the following code to wp-content/plugins/geo-mashup-custom/location-editor.js
geo_mashup_location_editor.mapCreated.addHandler(function () {
var $ = jQuery;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
$('#geo_mashup_search').val(position.coords.latitude + ',' + position.coords.longitude)
$('#geo_mashup_search').trigger(jQuery.Event('keyup', { keycode: 13, which: 13 }));
});
}
});
There are probably cleaner ways to do this, but I couldn't figure out how to access the methods in the GeoMashup JS API. In any case, this seems to work and is at least a starting point
