Google is undefined when using server-side script

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;

mlohbihler

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.

oscav

I understand.

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

mlohbihler

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?

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.

mlohbihler

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.

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

mlohbihler

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.

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

mlohbihler

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;';

oscav

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

mlohbihler

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.

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;

mlohbihler

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?

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?

mlohbihler

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.

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.

mlohbihler

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.

oscav

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

mlohbihler

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