Adding Google maps to your application

Index.html

In the AppHtml folder you find the index.html file that is the starting point for your application. In here you need to add the reference to the Google API and you also want to include a JavaScript file where you can put your own code.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=[YOUR_API_KEY]"></script>
<script src="js/map.js"></script>

map.wo

The important part of this file can be found in the "Show Button", where you need to tell it what JavaScript function to call when clicked. You do that by setting the property psClientOnClick to the name of your JavaScript function. Then you also need to set a function call to the function that render the view in in the "MapBox"-object. I call it RefreshMap here. The RefreshMap function render the map-canvas div and some hidden input fields with values that we need to render the map correctly using the google API.

        Object oShowBtn is a cWebButton
            Set piColumnSpan to 2
            Set psCaption to "Show"
            Set piColumnIndex to 10
            Set psClientOnClick to 'execMap'
        
            Procedure OnClick
                Send RefreshMap of oMapBox
            End_Procedure
        End_Object


        Object oMapBox is a cWebHtmlBox
            Set psHtml to ''
            Set piColumnSpan to 0
            
            Procedure RefreshMap
                String sHtml, sCenterMap, sPoints, sName, sCenterName
                
                WebGet psValue of oCenterMap to sCenterMap
                WebGet psValue of oPoints to sPoints
                WebGet psValue of oName to sName
                WebGet psValue of oCenterName to sCenterName
                
                Move ('<div id="map-canvas" style="float:left; width:99%; height:500px; border: 1px solid #099;"></div>') to sHtml
                Move (sHtml + '<input type="hidden" id="center_map" value="' + sCenterMap + '">') to sHtml
                Move (sHtml + '<input type="hidden" id="points" value="' + sPoints + '">') to sHtml
                Move (sHtml + '<input type="hidden" id="name" value="' + sName + '">') to sHtml
                Move (sHtml + '<input type="hidden" id="center_name" value="' + sCenterName + '">') to sHtml
                
                Send UpdateHtml to oMapBox sHtml
                
            End_Procedure
            WebPublishFunction RefreshMap
            
            Procedure onShow
                // This will make sure the map is visible on load time
                Send RefreshMap to oMapBox
            End_Procedure
            
        End_Object

map.js

The most important thing we need to manage here is the fact that we run in to a race condition. The JavaScript and the DataFlex render function is called at the same time and sometimes you en up with the situation that the html is not rendered when the script is executed. So, we need to device a waiting function that check if the div has been added to the dom. If not then we wait 10 milliseconds and try again until the html is in place.

    var execMap = function() {
        var jsonElem = document.getElementById('center_map');
        if (jsonElem !== null) {
            renderMap();
        } else {
            setTimeout(execMap, 10);
        }
    };

The second thing that is of interest in the JavaScript is the code that grabs the values from the hidden fields added by the RefreshMap function in DataFlex.

var centermap = document.getElementById('center_map').value;
var points = document.getElementById('points').value;
var navne = document.getElementById('name').value;

Google API

This technic will work on most JavaScript libraries and api:s, but if you want to create your own specific map you can look at the Google Maps documentation.
If you want to integrate with other maps, here is a list of options

Project files

If you want to have a look at my files you can download the code here. Just remember to update YOUR_API_KEY in index.html.
map_sample_code.zip (2,46kB)

2018-10-16 12:00:51 - dataflex, google maps, integration, javascript, software

Follow using RSS