3. Integrating Google Maps into atvise SCADA

This quick guide provides a simple example of how to integrate the Google Maps API into an atvise display.

Please note that this feature requires an active internet connection to work properly.

Google Maps is a powerful tool to visualize locations, assets, or sensor data directly within your SCADA displays.

By embedding a Google Map inside atvise, you can enrich dashboards with real-world geographic context, making it easier for operators to monitor distributed infrastructure like substations, solar fields, or remote water plants.

✅Steps

1. Get an API Key
   
   • Follow the official documentation to create and configure your Google Maps API key: Set up the Maps Embed API  |  Google for Developers 
2. Insert a Foreign Object
   
   • In your atvise display, insert a Foreign Object element and assign it a unique ID (for example: "myID"). This will be the container where the map is rendered.
     
3. Reference the Google Maps API
   • In the script section, add a reference to the Google Maps JavaScript API using your API Key.
     
     
     
4. Add a Map Configuration
   • Follow the official developer guide to configure your first map: Simple Map  |  Maps JavaScript API  |  Google for Developers
5. Insert the Code Example with a Marker
   • Use the provided sample code to display a basic map with a marker in the step 6.
     

6. // Declare variables for the map and marker
   var map;
   var marker1;
   
   // Path to the custom pin icon (make sure the file exists at this location)
   var pin = "/pinGreen.png";
   
   webMI.addOnload(function() {
       // Define the initial position (Costa Rica)
       var position1 = new google.maps.LatLng(10.491916, -84.572795);
       
       // Map options: zoom level, center, and type
       var myOptions = {
           zoom: 7,                               // Zoom level (7 = country scale)
           center: position1,                     // Centered at Costa Rica
           mapTypeId: google.maps.MapTypeId.HYBRID // Hybrid view (satellite + roads/labels)
       };
       
       // Create the map inside the container with ID "myID"
       map = new google.maps.Map(document.getElementById("myID"), myOptions);
   
       // Add a custom marker at the defined position
       marker1 = new google.maps.Marker({
           position: position1,  // Marker coordinates
           map: map,             // Reference to the map object
           title: "Costa Rica",  // Tooltip text when hovering the marker
           icon: pin             // Custom icon (default Google pin if omitted)
       });
       
       // Fix for map rendering issues inside dynamic containers
       // The map is forced to resize once it's idle, and then re-centered
       google.maps.event.addListenerOnce(map, 'idle', function() {
           google.maps.event.trigger(map, 'resize');
           map.setCenter(position1);
       });
   });

   
   
   

7. Check the atvise Live Example
   • Open the example project i021 google maps inside atvise to see how the integration works with the atvise library.