Google Map demo

Description
This page displays a Google Map with some custom markers.
gmapMarker component is used to add a Google Map marker.

The info parameter is used to display an information bubble when user click on a marker.
Marker icon can be customized with icon parameter.

Notice the sidebar parameter used to display a menu with active links of the markers.

Notice that info, title and icon can be loaded from resources file.
The keys have to be named:
  • id-title
  • id-info
  • id-icon



In Action
  • Champs-Élysées Metro
  • La Durée
  • Eiffel Tower



TML Source code

        <ex:gmap t:id="map1" latitude="48.8577" longitude="2.295" mapType="roadmap" sidebar="true">
            <ex:gmapMarker t:id="metro" latitude="48.867781" longitude="2.313982" />
    	    <ex:gmapMarker title="la-duree-title" latitude="48.870812" longitude="2.303081" info="Best macarons in Paris." />
    	    <ex:gmapMarker title="literal:Eiffel Tower" latitude="48.8577" longitude="2.295" 
    	                   icon="context:img/gmap/tour-eiffel.png"  info="message:tour-eiffel-info" />
        </ex:gmap>
	



Notice
These keys are defined in the property file of the current page:

Example2.properties :

tour-eiffel-info=<h4>Eiffel Tower</h4>Parc du Champ de Mars <br />5 Avenue Anatole France 75007 Paris
la-duree-title=La Dur??e
metro-title=Champs-??lys??es Metro
metro-icon=context:img/gmap/metro.png