Using map as input device for other field?

[Gertkok]

I’d like to use a Mappress map to let a user click at a location, and have the latlng coordinates pasted into a text field (probably on a Formidable Pro form, although I am not shure those forms have fields with id’s)

The subject is area in free nature, so no street addresses are involved.

Can this be done, what are best practices regarding MapPress (inclusion of Javascript, use of events, names)

[Chris]

Hi, the plugin doesn’t support anything like that.  You could hook into the save action and extract the data from the map as it is being saved.  The plugin call this action when a map is saved, with the mapid that was saved.

do_action('mappress_map_save', $mapid);

You can use this to retrieve the map:

Mappress_Map::get($mapid)

[Gertkok]

The usage of entering formfield-data is by a website’s visitor, at the frontend of the site. The formdata are saved, not the map. Using click-events is defined in the GoogleMaps API.

I think I will place Javascript in my functions.php. Can I assume the id: ‘mapp0_layout’ if there is only one map on a page?

[Chris]

Hi,

The map id is “mapp0” if there is one map on the page.  Then second map is “mapp1” by default, and so on.  The div containing the map also has the id “mapp0”, and the various layout parts are prefixed with that name, e.g. “mapp0_layout”, “mapp0_directions”, etc.

You can also specify a name in the shortcode using the name parameter, e.g. name=”mymap”.

[BradSiegfried]

I use both Formidable and MapPress and would be interested in doing exactly what Gertkok describes.

Gertkok, please post back and let me know how your plan works out.  Any pointers would be appreciated.

Thanks.

Brad

[Gertkok]

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

[Gertkok]

field_hdmyac and field_52snxh are keys of the Formidable fields.

wida_map is the id of the <div>

 

//<![CDATA[
var wida_latId = ‘field_hdmyac’;
var wida_lngId = ‘field_52snxh’;
var wida_mapId = ‘wida_map’;
//]]>

[BradSiegfried]

Thank you, Gertkok, for sharing and explaining.  Your example will be an excellent learning opportunity for me.

[Gertkok]

I replaced the last line of geolocator.js:

google.maps.event.addDomListener(window, ‘load’, wida_homePosition);

 

with these 3, which give me a better result. The map is shown at the page.
jQuery(document).ready(function() {
wida_homePosition();
});

 

[Author]

Posts