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.

oscav

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

oscav

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.

oscav

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?

oscav

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>

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;

oscav

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

oscav

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".

oscav

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>

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!!

oscav

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.

oscav

I understand.

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

oscav

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;

oscav

@oscav

Latest posts made by oscav