It is almost working, I miss initialisation when the form is shown (see last line )
To be done: add default positions when browser has no navigator.geolocation
————————————————————————————-
This is content of a Formidable HTML element:
<div id = “wida_map” style = “width: 100%; height: 300px”></div>
<br>
<input type = “Button” value = “Home Position” onclick = wida_homePosition() “/>
<script type=”text/javascript”>
//<![CDATA[
var wida_latId = ‘field_hdmyac’;
var wida_lngId = ‘field_52snxh’;
var wida_mapId = ‘wida_map’;
//]]>
</script>
9(another possibility is make a field like:
<type input = “hidden” id=”wida_identifiers” value=”wida_latId=field_hdmyac&wida_lngId=field_52snxh&wida_mapId=wida_map”>
Which may be a littlebit more easy for some Formidable developers, but then the Javascript should decode this string
————————————————————————————-
Add 2 custom fields to the post type , type of the custom field is numeric
create at least one post of this type to make this fieldnames visible for MapPress and Formidable:
latitude
longitude
————————————————————————————-
Make 2 fields on the Formidable form that will be entered in this custom fields latitude and longitude
Config MappPress to use these custom fields for automatic generating a map with the fields
—————————————————————————————-
This is added to the functions.php of the theme to include javascript.
Probably it can be do
If you have a google api key replace FILL-KEY-HERE with the key
function my_scripts_method() {
wp_enqueue_script(‘GoogleApis’, ‘//maps.googleapis.com/maps/api/js?key=FILL-KEY-HERE&sensor=false’);
wp_enqueue_script(‘wadi_GeoLocate’,
‘www.watisdatdaar.nl/y/wp-content/themes/watisdatdaar/js/geolocate.js’,
get_stylesheet_directory_uri() . ‘/js/geolocate.js’,
array(‘GoogleApis’),
”
);
}
//wp_enqueue_scripts
if (!is_admin()) add_action(‘wp_enqueue_scripts’, ‘my_scripts_method’);
—————————————————————————————-
geolocate.js
/* Id’s as entered on the Formidable Form
var wida_latId = ‘field_hdmyac’;
var wida_lngId = ‘field_52snxh’;
var wida_mapId = ‘wida_map’;
*/
var wida_map;
var wida_marker;
function wida_homePosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(wida_successHandler, wida_errorHandler);
}
}
function wida_successHandler(location) {
// Combine from raw json: latitude and the longitude;
var lat = location.coords.latitude;
var lng = location.coords.longitude;
var myLatLng = new google.maps.LatLng(lat, lng);
if (!wida_map) {
wida_initialize(myLatLng); // Called on first usage (is homeposition at startup)
}
wida_placeMarker(myLatLng);
}
// report errors to user
function wida_errorHandler(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert(“Could not get position as permission was denied.”);
break;
case error.POSITION_UNAVAILABLE:
alert(“Could not get position as this information is not available at this time.”);
break;
case error.TIMEOUT:
alert(“Attempt to get position timed out.”);
break;
default:
alert(“Sorry, an error occurred. Code: ” + error.code + ” Message: ” + error.message);
break;
}
}
function wida_initialize(latLng) {
var mapOptions = {
zoom: 10,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
wida_map = new google.maps.Map(document.getElementById(wida_mapId), mapOptions);
wida_marker = new google.maps.Marker({
map: wida_map
});
google.maps.event.addListener(wida_map, ‘click’, function(event) {
wida_placeMarker(event.latLng);
});
}
/*
* onClick handler for GoogleMap on the invulformulier, also used by wida_homePosition
*/
function wida_placeMarker(latLng) {
wida_marker.setPosition(latLng);
wida_map.setCenter(latLng);
wida_setNumbers(latLng);
}
function wida_setNumbers (latLng) {
document.getElementById(wida_latId).value = latLng.lat();
document.getElementById(wida_lngId).value = latLng.lng();
}
/* looks like this is not called yet */
google.maps.event.addDomListener(window, ‘load’, wida_homePosition);