GoogleMap

From HTML5 Builder
Jump to: navigation, search

The GoogleMap 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 GoogleMap 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

See Also