ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Map control
  • Overview of Map control
  • Map control creation and description
  • Creating a Map control
  • Describing the Map control
  • Popup for displaying markers
  • Displaying and handling maps
  • Displaying the maps
  • Maps handled by the user
  • Specific features
  • Modifying the permissions
  • Map control and Google license
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview of Map control
The Map control allows you to display a map in order to geolocate, display points of interest (POI) and more, ...
This map comes from:
  • Android the Google Maps service for Android applications.
    Attention The use of a Map control is subject to specific conditions of use. For more details, see Conditions for using the Map control. Check the Google license before deploying your applications.
  • iPhone/iPad Apple's geolocation service for iPhone/iPad applications.
    Please note: It is necessary to comply with the license of the service used.
The map displayed is interactive: you can zoom in and out, move around, etc. It can be displayed in map view or satellite view.
Map control creation and description

Creating a Map control

To create a Map control:
  1. On the "Creation" tab, in the "Graphic controls" group, click "Map".
  2. Click where you want to create the control in the window or page.

Describing the Map control

To view the control characteristics, select "Description" in the context menu of the control.
The "General" tab is used to define:
  • display mode: map or satellite,
  • whether traffic information is shown or hidden.
  • Android whether the zoom buttons must be displayed (or not) in the control,
  • AndroidiPhone/iPad how the compass is displayed.
  • the image used for the POI markers.
    Android These markers can be displayed with or without a shadow.
  • the default popup displayed when a marker is clicked. This popup can correspond to:
    • None: the default popup will be used.
    • AndroidiPhone/iPad Predefined window: In this case, an internal window is automatically integrated into your project..
    • AndroidiPhone/iPad an internal window in your project.
The "Details" tab allows you to define:
Remarks:
  • AndroidiPhone/iPad A single Map control can be used in a window. Several Map controls cannot be used in the same window.
  • AndroidiPhone/iPad geoRunApp is used to start the device's native maps application.

Popup for displaying markers

Depending on the platform, when a preset window or page is used to manage marker popups, the following elements are included:
  • WINDEV Mobile FI_WinDevPopupMarqueur_WM (internal window in the WDFAA component).
These elements contain:
  • two controls used to display the name and description of the marker.
  • a declaration code to handle the current Marker variable.
Displaying and handling maps

Displaying the maps

When a window containing a Map control is opened, a world map is automatically displayed: the map is centered on Europe, with a medium zoom level.
AndroidiPhone/iPad The last memorized position can be displayed by selecting "Remember last position displayed" in the "Detail" tab of the Map control description window. In this case, the last location is displayed with the same zoom level.

Maps handled by the user

The user can move on the map:
  • AndroidiPhone/iPad by scrolling the map with one or more fingers.
  • Android via the control positioning buttons (if "Show zoom buttons" has been selected in the "General" tab of the control description window).
The user can zoom in or out:
  • Android by using the zoom buttons of the control (if the option has been selected in the "General" tab of the control description window).
  • AndroidiPhone/iPad using a "scale" (or "pinch") gesture: two fingers spread apart on the screen to zoom in, and two fingers brought together on the screen to zoom out.
  • Android by double-tapping the map to zoom in one level on a position (if this option has been checked in the "General" tab of the control description window).
  • programmatically with the Zoom property.
AndroidiPhone/iPad If "Enable zoom" is disabled (in the "Details" tab of the control description or WithZoom property), the user will not be able to zoom in or out.
AndroidiPhone/iPad Note: Optional events specific to the Map control can also be used. For more details, see Map control events.
Specific features
Android

Modifying the permissions

Using a Map control automatically adds the INTERNET permission to the list of permissions required by the application.

Map control and Google license

Android Attention: Googlelicense
You must specify a license key to use the maps service.
A Google Developer account is required to get a Google Maps API key. Refer to the Google license to learn more about the terms of service (free or paid service, usage quota, etc.).
When the developer account is available, you must:
  1. Generate the key in the Google developer console (https://console.developers.google.com). The operations to perform are as follows (valid at the date this page was written):
    • Use a Google account to connect to the developer console.
    • Create a project if necessary.
    • Click "Enable APIs and services".
    • Click "Maps JavaScript API".
    • Click "Enable" to enable the Google Maps JavaScript API.
    • Click "Credentials". Then, click the link "Credentials in APIs & Services".
    • Click "Create credentials".
    • Select "API key".
    • Validate the key creation and copy the key created by Google.
  2. Specify the key used in the application or in the site with MapLicenseGgl.
Related Examples:
The Map control Unit examples (WEBDEV): The Map control
[ + ] This example explains how to use the Map control of WEBDEV.
It can be used to display a map that includes markers as well as an itinerary.
The Map control Unit examples (WINDEV): The Map control
[ + ] Using the Map control of WINDEV.
It is used to display a map that includes markers as well as an itinerary.
The GglGetStaticMap function Unit examples (WINDEV): The GglGetStaticMap function
[ + ] Using gglGetMap to display a Google map in an Image control.
WM Geolocation Cross-platform examples (WINDEV Mobile): WM Geolocation
[ + ] This example explains how to perform proximity searches with geolocation :
- search around me
- search in a city, at a given address, or close to a specific address.
The results are displayed in a looper and in a map with markers.
WM Sports Cross-platform examples (WINDEV Mobile): WM Sports
[ + ] This example is a sport application used to save your performances.
The application calculates the distance, the time, the average speed and the number of calories spent according to the sport.
The run is displayed on a map control via markers and an itinerary.

The example also includes a server part used to synchronize the user data.
This webservice is available in the WEBDEV "WW_Sports" example.
See also
Minimum version required
  • Version 17
This page is also available for…
Comments
Errors that may occur in Maps not working:
A) in the Google developer environment, a valid credit/debit card must be registered in the billing method of payment. If you do not have a card that has valid usage data, it may also give an error.
B) environment changes may be necessary to create new api key.
C) the api is not ok, because for the maps it has a
Different web and mobile apis, minus watching an updated tutorial.
D) ocorre erro também quando o WX (Windev, Webdev e Windev Mobile) esta desatualizado e usando a versão antiga do internet explorer. Solução mudei pra o google/edge.
E) informeo apikey válido do googlemaps.
Boller
30 Aug. 2023
Errors that may occur in Maps not working:
A) in the Google developer environment, a valid credit/debit card must be registered in the billing method of payment. If you do not have a card that has valid usage data, it may also give an error.
B) environment changes may be necessary to create new api key.
C) the api is not ok, because for the maps it has a
Different web and mobile apis, minus watching an updated tutorial.
Boller
30 Aug. 2023

Last update: 06/18/2025

Send a report | Local help