HowTo: Using Map control

Official Content

Breaking change: To configure a Google Maps API key after the Google policy changes of 22 June 2016, please download version 8.1 or higher from here or the marketplace.


It allows including a map in a Web Form and marking points on it. In addition, it allows setting map display properties such as precision, map type, zoom control, etc. Currently, there are three providers: Google, Baidu, and Yahoo for any city in the world.

Using the control

Uncompress the zip file to the User control directory of the GeneXus X installation. At design time, the control can be opened from View/Tool Windows/Toolbox. With drag & drop, a map is added to the Web Form and a sample is consolidated to mark some points on the map.

For each point, a title, text, and link can be specified.

To geoposition the map or a point on it, the coordinates (latitude/longitude) are needed. To this end, there is a City property with a set of cities and their coordinates or two Latitude/Longitude properties (N/E positive number, S/W negative number). These values are in decimal degrees format.

Download the control from here.

Example - GeneXus Code  

1. Draw Point

&Radisson = new GxMap.Point()
&Radisson.PointLat         = "-34.9056247303566"
&Radisson.pointLong        = "-56.198415756225586"
&Radisson.PointInfowinTit  ='XIX International GeneXus Meeting'
&Radisson.PointInfowinDesc = "Radisson Montevideo Victoria Plaza Hotel - September 14-16"
&Radisson.PointInfowinLink = ""

&Radisson.PointInfowinLinkDsc = "Genexus Site" 

&Radisson.PointIcon       = "Red" // or &Radisson.PointIcon = "|FE6256|000000"
&Radisson.PointInfowinImg = ",1" // Some image

Note: Google has a good dynamic image generator (chld=Text|Point background color; to change the color append |text color, eg: |FE6256|000000).

The sample is consolidated in the object's start event when dragging and dropping the control.

2. Draw Line

&MapLine = new()
&MapLinePoint = new()
&MapLinePoint.PointLat  = '31.223182'
&MapLinePoint.PointLong = '121.44654'

&MapLinePoint = new()
&MapLinePoint.PointLat  = '31.228209'
&MapLinePoint.PointLong = '121.474006'



3. Get coordinate from address (Geocoding - Google)

 &httpclient.Host = ''                       //build a post to get the address 

 &httpclient.BaseUrl     = '/maps/api/geocode/'
 &postvar = 'xml?address =' + &address + '&sensor=false'
 &httpclient.Execute('GET',&postvar)                       //execute
 &var = &httpclient.ToString()

 &xmlreader.OpenFromString(&var)                           //parse the coordinates
 &lat = &xmlreader.Value
 &long = &xmlreader.Value

 GoogleMapControl1.Latitude =&lat                          //center the map in the coordinates
 GoogleMapControl1.Longitude = &long
 GoogleMapControl1.Precision = &precision

See this video for more info.

Other design (or runtime) properties of the control are as follows:
- precision (zoom scale is 1 to 16)
– type of map (map, satellite photo or hybrid)
- controls can be included within the map such as zoom, overview, etc.

4. Get route between two points 

- Set the Travel_Mode control property -> Driving or Walking
- Populate the SDT Routing points, programming something like the following: 

&routingpoint = new()
&routingpoint.Latitude = 'xxxxxxx'
&routingpoint.Longitude = 'yyyyyy'
&routingpoint.Description = 'Work'
&routingpoint.Pin = "blank.png"

&routingpoint = new()
&routingpoint.Latitude = 'xxxxxxx2'
&routingpoint.Longitude = 'yyyyyyy2'
&routingpoint.Description = 'House'
&routingpoint.Pin = "blank.png"

5. Get coordinates just by clicking on the map

- Set the On Click control property = Get Value 
- In an event, program something like this: 

    for &point in &GxMapData.Points

    where &point is based on GxMap.Point Data type and GX Map Control property = &GxMapData (based on GXMap Type) 

- Important: getLongitude and getLatitude properties were used in previous versions (deprecated). 

6. Get coordinates and open popup just by clicking on the map

Set Click_Lat and Click_Long variables into ClickLatitude/ClickLongitude design properties.

Event GoogleMapControl1.Click
        &Window.Object = WPAsPopup.Create(&ClickLatitude , &ClickLonigtude)

Control Properties

Property Description

Defines what provider will be used to draw the map (Google, Yahoo, Baidu.)

Access Key Google: The key is obtained from
It has some restrictions such as the number of accesses per day to the page. In version 2.0 or older, this property is not taken into account at runtime.
Yahoo: The default value is "ajaxymap?v=3.0&appid=" and it is necessary to concat the ApiKey Value at the end.
The key is obtained from
In version 2.0 or older, this property is not taken into account at runtime.

Possible Values= Map, Satellite, ImageHybrid

City Offers a combo to position the map on a specific city. To define another place, set the "Specific Coordinate" value and set the Specific Latitude and Specific Longitude values. To add a city to the combo, edit the User Control/Map/Mapdefinition.xml
Latitude Used to center the map when City (Specific coordinate) is not selected.
Longitude Used to center the map when City (Specific coordinate) is not selected.

Levels 1 to 16 to indicate the zoom


By default : GoogleMapControlX


Controls appearing inside the map

Small Lets us pan/zoom the map. It enables arrows to move (up, down, left, right) and zoom (control "+" and "-")
SmallZoom A small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps.


A large pan/zoom control used on Google Maps. Appears in the top left corner of the map.

Overview A collapsible overview map in the corner of the screen. It's not valid for Yahoo provider.


A map scale Height

Data Binding

An SDT variable of GXmap type can be specified to indicate points on the map at runtime: the variable is created when dragging and dropping the control. For each point of the provided collection, the following is specified:
Point coordinates (PointLat, PointLong)
Icon – type of icon
Infowindow - text to display upon clicking the point
InfowindowTit - title
InfowindowDesc - text
infowindowLink - Link

PointDraggable - Boolean //This point is draggable
PointDeletable - Boolean  //
This point is deletable with double click 

Google Provider  

Offers a combo of color icons. The possible values are: Red, Green Blue, Orange, Pink
It can also specify a Url, such as|00ff00|000000

OpenlinkInNewwindow It allows opening a new window when clicking the PointInfowinLink inside the balloon.


Geticon It allows changing the color of the icon which is use to get the coordinate of any point

It allows getting the latitude/longitude of any point, just by clicking on the map.
• getvalue & center: return coordinates of the clicked point and center the map there.

      • getvalue: return coordinates of the clicked point. 

      • none: there is no action when clicking on the map.

This property allows getting the Coordinates when clicking on the marker (Example 4). 
Kml Boolean. Allows turning on a Kml Layer 
KmlUrl Character. Url of Kml file: i.e : ''
Travel_Mode Driving/Walking. In order to use Routing please check Example 5 



Google Provider:
                        Since 22 June 2016, an ApiKey is required
                        In order to get an ApiKey, go to with the following terms of use,

Yahoo Provider: You have to obtain an access key from with the following terms of use



8.3.6 - 

- Webpanel which include map is not showing when is called from another webpanel which includes map.
- An Event, lunched from one button, which creates markers is not work properly
- Markers are not showed, after refresh map
- Markers image are distributed
- The snippet code is improved
- SDT to represents Circles is included
- Event Click is not work properly

8.3.1 - 

- An error "You have included the Google Maps API multiple times", occurs using the control in web component
- Double click when zoom is creating marker
- Circles are implemented
- Marker Click Event is enabled
- Snippet code to draw Lines 
- Markers icons update 
- Multiple loads of Google JScript
- Remove Lines
- Map contour does not appear at design time, with abstract layout 
- Type Terrain support 
- New properties: icon size and icon anchor

8.1 - 
       It allows ApiKey configuration 
       Icon Url was changed
       Secure URL for accessing API 

8.0- Kml support  
       Routing support 
       Breaking Change: 
GetLatitude, GetLongitude properties are not supported.
         In order to Get Latitude and Longitude, please check Example 6 above

7.0- Distribute GXxev2 U3

       Draw lines
GoogleMapControl.Click is enabled
         Map control works fine as dynamic 

6.1 - Add Baidu Maps (China) as new maps provider. Now you can Draw lines (available on Google and Baidu). Reduced the number of resources requested (now depends on the chosen provider).

6.0 - Distributed with GxXev2. Implementation using Google map V3 API
5.2 - Distributed with GxXev1 U3 

5.1 - Distributed with GxXev1 U1 
        New properties: 
        Rename property Get read-only to Onclick and include a new value "getvalue & center"
        Fix: when a point is marked, it is possible to use another icon different from the predetermined one.

5.0 - Breaking change: Change the name of the control to GoogleMapControl
        New GetCoordenate section includes GetIcon Property, Get read-only property and 
getLatitude/getLongitude (both are read-only at design time).
4.0 - Access to new API V2 (required for Ruby prototyping) 
       It is possible to change the icon color:
                   For the entire map using the Icon property of the control. 
                   Per each marked point using the PointIcon property of Gxmap.point data type.
3.1 - Fix some default values and implement the Access Yahoo Key

3.0 - Include Icon (Google Provider). Include Link description and image (Google, Yahoo)
2.0 - Include Ica Provider - Montevideo Local Map
1.3 - Include a fix for Google and Yahoo map
1.2 - Update the control for breaking change of Build 6884
1.0 - Google and Yahoo map implementation

You can choose the control provider from the window properties by selecting and setting the Provider property. Your selection depends on your needs because each provider offers different functionalities.

Map control - Properties

Provider = Google


  • City – coordinates (Latitude, Longitude) of the city represented in grades. They are defined in User control/Map/Mapdefinition.xml
  • Specific Latitude – the value is represented in grades. N/E positive, S/W negative
  • Specific Longitude – the value is represented in grades. N/E positive, S/W negative
  • Precision - levels 1 to 16 to indicate the zoom (the higher the number, the closer the zoom)
    map.setCenter(new GLatLng(This.Latitude,this.Longitude), This.Precision );  
    • Map
    • Satellite Image
    • Hybrid
  • Access Key – the key is obtained from The URL for publishing the map has to be specified. It has some restrictions such as the number of accesses per day to the page.
    • Small - let us pan/zoom the map.
    • map.addControl(new GSmallZoomControl());
    • Type
    • Overviewype (Only Google)
      map.addControl(new GOverviewMapControl());
    • Large-
      map.addControl(new GLargeMapControl());
    • Scale-
      map.addControl(new GScaleControl());

Provider = Yahoo 


  • City – Similar to Google's implementation
    map.drawZoomAndCenter(new YGeoPoint(this.Latitude,this.Longitude, this.Precision)
  • Specific Latitude – the value is represented in grades. N/E positive, S/W negative
  • Specific Longitude – the value is represented in grades. N/E positive, S/W negative
  • Precision - levels 1 to 16 to indicate the zoom (the smaller the number, the closer the zoom)
    • Map
    • Satellite Image
    • Hybrid
    • Small - lets us pan/zoom the map.
    • map.addZoomShort();
    • Type
    • Large-
    • Scale-

Please visit: Default Installation Instructions for User Controls.


Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.