mapMarker - Google Maps based coordinate form element, POI, marker, address chooser

mapMarker - Google Maps


 

The mapMarker element is a quite helpful one allowing users to specify map coordinates (latitude, longitude) using a drag and drop marker. This element type uses Maptimize AddressChooser and Google Maps, so you'll need to create a Google Map API to use it and also include some simple JS files (Clonefish helps with this).

You can also add autocomplete field(s) to help users finding the right location. To use autocomplete a single helper field is enough, though you can refer to other already defined form elements (like country, zip, city, address fields) - the values of these fields can be stored in your database too. The autocomplete feature needs Prototype and Scriptaculous - Clonefish includes them automatically from Google AJAX JS API by default, which is a better-faster-cleaner approach for users.

This component naturally relies on JavaScript heavily: however if JS is turned off for some reason, users can specify latitude and longitude values by hand.

The component returns a simple string value containing latitude and longitude glued together with a string (which is ### by default). If you need the separate values, you can use the getValueArray() method of this element.

Valid latitude values are -90° .. 90°, longitude: -180° .. 180° - the element doesn't record (accept, store) invalid values even when there's no validation, so you'll get either a valid value or null when using the getValue methods.

 


<?php

$config 
= Array(

  
'coordinates' => Array( 

    
'type'           => 'mapMarker',
    
'displayname'    => 'Specify your location!',

    
'key'            => '...',  // Google API key, required
    
'width'          => 350,    // width of map in pixels, default: 350
    
'height'         => 350,    // width of map in pixels, default: 350
    
'jspath'         => '/js/'
    
// Path (URL) to addresschooser.js and proxy/googlemaps.js
    // These are AddressChooser javascript files.

    
'autocomplete'      => true,  // turn on/off autocomplete feature

    
'prototypepath'     => 'http://ajax.googleapis.com/...',
    
'scriptaculouspath' => 'http://ajax.googleapis.com/...',
    
// path to Prototype and script.aculo.us required by AddressChooser
    // autocompletion feature. Defaults to Google AJAX JS API URLs.

    // String displayed when JS is not available
    
'jshelp     => 
      '
Turn on JavaScript in your browser to use ' . 
      '
Google Maps instead of typing coordinates!',

    '
latitude'  => 'Latitude:', 
    // Label for latitude field when JS is not available
    '
longitude' => 'Longitude:', 
    // Label for longitude field when JS is not available

    '
glue'      => '###',
    // Glue string used to separate latitude and longitude numbers
    // in concatenated element value (eg. 42.12312938###34.124812498)

    
'autofocus' => true,
    
// whether or not to autofocus on the autocomplete street element

    // The following 5 settings may be used for autocompletion.
    // The settings contain DOM IDs. When they're used, 
    // the input elements must exist.

    
'street'    => null,
    
// When the street field is not specified (which is the default),
    // Clonefish automatically creates a "throw away" autocomplete input 
    // field above the map (only if autocomplete is used).
    // When only the street field is used (no city, zip, etc), it is used as 
    // a joker field: any part of an address can be used Google knows can be 
    // used.
    //
    // This field is not validated nor returned by Clonefish: if you want to
    // store the value of this field, create a separate inputText element
    // and specify it's its DOM ID here (DOM ID is the name by default, or 
    // htmlid setting if set).

    
'country'   => 'cf_Country'// setting defaults to non-existing
    
'state'     => 'cf_State',   // DOM ids to avoid unwanted default
    
'city'      => 'cf_City',    // behaviour
    
'zip'       => 'cf_Zip',

    
'autofocus' => true
    
// when autocomplete field is used, sets focus to the street input field.

    
'value'          => 'default value here',
    
'html'           => 'class="inputfieldstyle"',
    
'help'           => 'validation failed for this element',
    
'rowlayout'      => '...%element% %prefix% %postfix% etc...',
    
'prefix'         => 'string to display before element',
    
'postfix'        => 'string to display after element',
    
'readonly'       => 0,
    
'display'        => 0,
    
'htmlid'         => 'name1',
);

?>


form validation for developers!

clonefish is a proven, mature form generator class that helps PHP developers to create, validate and process secure, flexible and easy-to-maintain forms
learn more
Bookmark and Share