MMap

The MMap component is an interactive world map powered by the Google Maps service.

Note: You must agree with the Google Maps API’s Terms of Service in order to use this component.

Usage

The MMap component provides a global JavaScript object, ComponentName_map, which holds the Google Map object. You should check the Google Maps JavaScript API Reference for information on how to interact with that object.

Go to an Address

var geocoder = new google.maps.Geocoder();
var geocoderRequest = { address: 'The address you want to go to' };
geocoder.geocode(geocoderRequest, function(geocoderResult, geocoderStatus){
    if (geocoderStatus == google.maps.GeocoderStatus.OK)
    {
        ComponentName_map.panTo(geocoderResult[0].geometry.location);
    }
});

Go to a Point

ComponentName_map.panTo(new google.maps.LatLng(latitude, longitude));

Where latitude and longitude are float numbers. For example: 33.137551 and -39.375000.

Add a Marker

var marker = new google.maps.Marker({ map: ComponentName_map });
marker.setPosition(new google.maps.LatLng(latitude, longitude));

Client-side Features

DOM Elements

The component generates the following client-side DOM elements:

• Wrapper (HTMLDivElement). Full web browser support. Access it with $("#ComponentName_outer").get()[0].
  • Main element (HTMLDivElement). Full web browser support. Access it with: $("#ComponentName").get()[0].
    • …

Client-side Events

Documented in the RPCL Reference.

Server-side Features

Properties, Methods and Events

Documented in the RPCL Reference.

Help Resources

Documentation

• Documentation for jquery.ui.map, the jQuery plugin used by this component.
• Google Maps JavaScript API Reference.

Video Tutorials

• Location-Based Development with HTML5 Builder.
  • 2:45 — Usage of MGeolocation and MMap in a client mobile application.

See Also

• Alternatives: GoogleMap (web applications).
• Google Maps.