Google Maps API v3 - Uncaught ReferenceError: google is not defined 

Google Maps API v3 - Uncaught ReferenceError: google is not defined 

  
Hello,

I'm trying to create a Google Map in a webscreen but I keep getting this error in Chrome's Javascript Console :
"Uncaught ReferenceError: google is not defined".

I think this has to do with the place where I put the "<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>"

I'm putting this in a expression shape at the bottom of the webscreen (already tried on top with same error).
The only other content of the webscreen is a Container/DIV.
The rest of  the code is in the webscreen's javascript.


var map;

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('mapcanvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, "load", initialize);


Solution
Hi Nelson,

Why don't you use the Google Maps Component that is available in the Forge?


Cheers,
Solution
Thanks José,
I'm trying that one.
Setting Address and Example to "Lisboa" and putting my API Key , I get the following errors :

GET https://<site>.outsystemscloud.com/<espacename>/osjs.min.map 404 (Not Found) 
GET https://maps.googleapis.com/maps/api/staticmap?markers=Lisboa&size=640x200&…2&sensor=false&maptype=roadmap&key=AIzaSyBMeq9QzwOCJdalgES02j2bPI7HWUJwkYQ 403 (Forbidden) 

Any ideas?
I was able to solve this.
Had to activivate the StaticMap API.

But this component quite doesn't do everything I need.
I must put controls on the map, zoom, etc..
If I put a marker in Braga and other in Lisboa, it shows me Figueira da Foz.
Would be great to have a auto zoom to show all markers, or zoom out with the controls.
Also to be able to drag the map.

That's why I was going with the standard Map API v3


My main goal is to have a table with addresses and a description field.
And show a marker for each address and clicking in the marker, a popup with the text in the description field.
Zoomin out to show all markers.
All will be in Portugal.
Oh sorry,

I believe the Google Services Component can help you, however I never used that one but have seen some integrations with it, and if I recal they had those kind of interactions.


Cheers,
Still trying this.

I created a Container/DIV with name "mapcanvas"
After it I've out an expression with ESCAPE CONTENT=NO and Text :

The alert and the map never show up.

In Chrome's developer console there are no errors.

 "
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<script type='text/javascript'>
var map;
function initialize() {
window.alert('hey');
    var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
    };
    map = new google.maps.Map(document.getElementById('"+mapcanvas.Id+"'),mapOptions);
}
 google.maps.event.addDomListener(window, 'load', initialize);
</script>
"