1.0.1 19.0+ framework Alex Jitianu Google Map Form Control Sample Google Map Form Control Sample

A sample framework uses a Browser Form control to load an HTML. This HTML shows the coordinates using Google Maps and allows you to and edit the attributes underneath.

How to test it, after install

  1. Open the file form-controls/travel-guide/travel-guide.xml from Oxygen's samples directory.
  2. Scroll to the Points of Interest section.
  3. Each point of interest has an address. Next to each address there is an action. Click the action.
  4. A form control will appear and will present a marker on the map. Using right click you can move the marker and the address text and attributes will be updated automatically.

How it works

Everything is based on the Browser Form control that loads map.html:

address:before(3):-oxy-edit-gps {
    display:block;
    content: oxy_browser(
                    href, oxy_url("map.html"), 
                    width, 100%, 
                    height, 400px
                    );
}

The HTML loaded by this form control uses Google Maps to presents the coordinates:

    //--------------------------------------------------
    // Initializes the map on the given coordinates.
    //--------------------------------------------------
    function initialize(lat, lng) {
        
        var latlng = new google.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            // mapTypeId : google.maps.MapTypeId.HYBRID,
            mapTypeControl: false,
            navigationControl: false,
            streetViewControl: false
        };
        
        document.map = new google.maps.Map(document.getElementById("map"), myOptions);
    }

The interaction between the Javascript and the Oxygen Workspace is possible through a number global variables visible in Javascript:

 var newAttrValue = apiHelper.newInstance(
           "ro.sync.ecss.extensions.api.node.AttrValue",
           ["normalizedValue", "rawValue", true]);
 authorAccess.getDocumentController().setAttribute(
        "counter", newAttrValue, contextElement);

Please see map.html for the full version.