Google is undefined when using server-side script

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.