Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

Google is undefined when using server-side script


  • Hi,
    I'm trying to use google maps with a server-side script. I got a message "google is undefined".
    It seems the API is not loaded when calling 'google'. Someone know how to solve this?

    remark: it works well when it is in static HTML content.

    Here is my script:

    var s = "";
    s +="<head>";
    s +=" <meta http-equiv="content-type" content="text/html; charset=UTF-8" />";
    s +=" <title>GPS loc</title>";
    s +="<script src="http://maps.google.com/maps/api/js?sensor=false"></script> ";
    s +="</head>";
    s +="<body>";
    s +=" <div id="map" style="width: 600px; height: 550px;"></div>";
    s +=" ";
    s +=" <script type="text/javascript">";
    s +=" var locations = [";
    s +="";
    s +="['test',40.123456,52.123456,2]";
    s +=",['test2',21.323232,44.545454,1]";
    s +="";
    s +=" ];";
    s +=" var map = new google.maps.Map(document.getElementById('map'), {";
    s +=" zoom: 6,";
    s +=" center: new google.maps.LatLng(47.4,1.6),";
    s +=" mapTypeControl: true,";
    s +=" mapTypeControlOptions: {";
    s +=" style: google.maps.MapTypeControlStyle.DROPDOWN_MENU";
    s +=" },";
    s +=" navigationControl: true,";
    s +=" navigationControlOptions: {";
    s +=" style: google.maps.NavigationControlStyle.SMALL,";
    s +=" position: google.maps.ControlPosition.TOP_RIGHT";
    s +=" },";
    s +=" scaleControl: true,";
    s +=" streetViewControl: false,";
    s +=" mapTypeId: google.maps.MapTypeId.ROADMAP";
    s +=" });";
    s +=" ";
    s +=" var infowindow = new google.maps.InfoWindow();";
    s +=" ";
    s +=" var marker, i;";
    s +=" ";
    s +=" for (i = 0; i < locations.length; i++) { ";
    s +=" marker = new google.maps.Marker({";
    s +=" position: new google.maps.LatLng(locations*[1], locations*[2]),";
    s +=" map: map";
    s +=" });";
    s +=" ";
    s +=" google.maps.event.addListener(marker, 'click', (function(marker, i) {";
    s +=" return function() {";
    s +=" infowindow.setContent(locations*[0]);";
    s +=" infowindow.open(map, marker);";
    s +=" }";
    s +=" })(marker, i));";
    s +=" }";
    s +=" </script>";
    s +="</body>";
    s +="</html>";

    return s;


  • Server-side scripts run on the server, not in a browser context. Your HTML content would be ignored, and so the google script would not get loaded.


  • I understand.

    Is there any workaround to get the google maps working with Mango GPS data points ?


  • There's always a workaround. :)

    How are you storing GPS points in Mango? Separate points for lat/long, or some kind of encoding into an alpha point?


  • I was thinking to get the GPS localization into a single alphanumeric point of an HTTP Retriever datasource that I would concatenate into a javascript content.

    It could be : httpds?__device=gpslocA&__point=position1&__value=40.123456,52.123456

    then the value is used to build the google maps object as I was trying to do on my server side script (see above).

    The goal is to use dynamic google maps.


  • Right. Have you tried loading the google script with an HTML component, and then calling the script using a server side script component?

    I tried something simple:

    
    return '&lt;script type="text/javascript"&gt;alert('+ value +')&lt;/script&gt;';
    
    

    ... which worked. Presumably something more elaborate should work for your purposes.


  • The HTML component is not linked to a point, so I can't any variable in HTML component.

    Is I set a graphical view with : an HTML component where I call the Google Maps API , and a server side script where I use the Google API with point values, Then I still get 'Google is undefined'.

    The code works very well if I have all the code inside the HTML component.

    Here is the code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>multi-marqueurs</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
    type="text/javascript"></script>
    </head>
    <body>
    <div id="map" style="width: 600px; height: 550px;"></div>

    <script type="text/javascript">
    <!--
    var locations = [
    ['Jérôme et Catherine Blondel', 49.898729,3.13606, 5],
    ['Laurent et Sabine Blondel', 50.684142,3.1360678, 4],
    ['Noël et Anne Marie Blondel', 49.953802, 2.360237, 3],
    ['Jean Luc et Catherine Blondel', 48.606369,2.886894, 2],
    ['Patrice et Marie Alix Blondel', 46.149513,6.410866, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(47.4,1.6),
          mapTypeControl: true,
        mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
     navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
        scaleControl: true,
    streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    var infowindow = new google.maps.InfoWindow();
    
    var marker, i;
    

    for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations*[1], locations*[2]),
    map: map
    });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations*[0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    

    -->
    </script>
    </body>
    </html>

    Just copy and paste into an HTML component to see the result. What I would like to do is to replace the variable "locations" with data points. I can't get out of this problem!!


  • Did you try just putting the script download part into the HTML component?

    &lt;script src="http://maps.google.com/maps/api/js?sensor=false"
    type="text/javascript"&gt;&lt;/script&gt; 
    

    Then, put your map rendering into the server-side script components.


  • yes, I also tried this but it doesn't work. I gives the same error.

    I also tried to add "<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>" in the body section of index.jsp, but still doesn't work. I get "google is undefined".


  • Are you encoding the response from the server-side script as i illustrated?

        return '&lt;script type="text/javascript"&gt;alert('+ value +')&lt;/script&gt;';  
    

  • yes, see the script above. I return a complete HTML page with a script calling the google api.


  • Sorry, i see that in your first post, but not in your subsequent posts. Maybe you can put here exactly what you are attempting, because i'm pretty sure that this should work.


  • This is the code of the static HTML component and it works.

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>multi-marqueurs</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
    type="text/javascript"></script>
    </head>
    <body>
    <div id="map" style="width: 600px; height: 550px;"></div>

    <script type="text/javascript">
    var locations = [
    ['point1', 49.898729,3.13606, 5],
    ['point2', 50.684142,3.1360678, 4]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(47.4,1.6),
          mapTypeControl: true,
        mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
     navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
        scaleControl: true,
    streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    var infowindow = new google.maps.InfoWindow();
    
    var marker, i;
    

    for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations*[1], locations*[2]),
    map: map
    });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations*[0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    

    </script>
    </body>
    </html>

    ... and this is the same code copied into a server-side script, and it doesn't work.

    var s="";
    s +="<!DOCTYPE html>";
    s +="<html>";
    s +="<head>";
    s +=" <meta http-equiv="content-type" content="text/html; charset=UTF-8" />";
    s +=" <title>multi-marqueurs</title>";
    s +=" <script src="http://maps.google.com/maps/api/js?sensor=false"";
    s +=" type="text/javascript"></script>";
    s +="</head>";
    s +="<body>";
    s +=" <div id="map" style="width: 600px; height: 550px;"></div>";
    s +=" ";
    s +=" <script type="text/javascript">";
    s +=" var locations = [";
    s +=" ['point1', 49.898729,3.13606, 5],";
    s +=" ['point2', 50.684142,3.1360678, 4]";
    s +=" ];";
    s +=" ";
    s +=" var map = new google.maps.Map(document.getElementById('map'), {";
    s +=" zoom: 6,";
    s +=" center: new google.maps.LatLng(47.4,1.6),";
    s +=" mapTypeControl: true,";
    s +=" mapTypeControlOptions: {";
    s +=" style: google.maps.MapTypeControlStyle.DROPDOWN_MENU";
    s +=" },";
    s +=" navigationControl: true,";
    s +=" navigationControlOptions: {";
    s +=" style: google.maps.NavigationControlStyle.SMALL,";
    s +=" position: google.maps.ControlPosition.TOP_RIGHT";
    s +=" },";
    s +=" scaleControl: true,";
    s +=" streetViewControl: false,";
    s +=" mapTypeId: google.maps.MapTypeId.ROADMAP";
    s +=" });";
    s +=" ";
    s +=" var infowindow = new google.maps.InfoWindow();";
    s +=" ";
    s +=" var marker, i;";
    s +=" ";
    s +=" for (i = 0; i < locations.length; i++) { ";
    s +=" marker = new google.maps.Marker({";
    s +=" position: new google.maps.LatLng(locations*[1], locations*[2]),";
    s +=" map: map";
    s +=" });";
    s +=" ";
    s +=" google.maps.event.addListener(marker, 'click', (function(marker, i) {";
    s +=" return function() {";
    s +=" infowindow.setContent(locations*[0]);";
    s +=" infowindow.open(map, marker);";
    s +=" }";
    s +=" })(marker, i));";
    s +=" }";
    s +=" </script>";
    s +="</body>";
    s +="</html>";
    return s;


  • I had recommended that you split your code into both HTML and server-side script components. Take the part that loads the google script and put it into and HTML component. It may have to be defined first so that it loads before calls are made to it by other components. Then, take the rest of the code and put it in a server-side script. Do you see what i mean?


  • I understood that I should split the code and load the API first. I tried to set in the same graphical view an html component with the api and a server side script but with no success. I don't see another way.

    Is is possible to call a server side script from the HTML component?


  • I still believe that this can be done, although the edit page doesn't recognize scripts the same way that the view page does, and the quoting of the code can get ugly.

    I didn't go all the way to using the google script. Instead, i created scriptTest.js in the webapp dir, containing this:

    function addBold(str) {
    	return "<b>"+ str +"</b>";
    }
    

    This was just to prove that a script can get called. The html component has this content:

    &lt;html&gt;&lt;head&gt;
    &lt;script test="test/javascript" src="scriptTest.js"&gt;&lt;/script&gt;
    &lt;/head&gt;&lt;/html&gt;
    HTML stuff
    
    

    The server-side script has this:

    return '&lt;span id="asdf"&gt;&lt;/span&gt;&lt;script type="text/javascript"&gt;$set("asdf", addBold('+ value +'));&lt;/script&gt;';    
    

    On the edit page i get a JS error saying addBold is not found, but it works on the viewing page.

    Overall, JSP views might be better functionality to use for this, but i haven't tried it myself.


  • What is the directory where to store the script? in \webapps\ROOT\WEB-INF or \webapps\ROOT\WEB-INF\scripts ?

    The HTML component and the server-side script are in the same graphical view??

    I tried to implement your example but it didn't work. I get a blank view with no errors.


  • No, scriptTest.js was in webapps/ROOT, but you could use a script from anywhere, such as a CDN. And yes, the two components are in the same graphical view.


  • I did this exactly but the view remains blank with no errors. What version of Mango are you using?


  • 1.13.7, but the functionality hasn't changed for a long time.