Reply To: Using map as input device for other field?

Home Forums MapPress Support Using map as input device for other field? Reply To: Using map as input device for other field?

#11252
Gertkok
Participant

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