Skip to Content (Press Enter)
2019-12-11 17-59-12
Nelson André
37Views
6Comments
Solved
Google Maps API v3 - Uncaught ReferenceError: google is not defined 
Question
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);


0
0
20 Nov 2014
Copy Link
2013-06-13 01-27-39
José Caldeira
Solution
Hi Nelson,

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


Cheers,
0
0
20 Nov 2014
Copy Link
2019-12-11 17-59-12
Nelson André
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?
0
0
20 Nov 2014
Copy Link
2019-12-11 17-59-12
Nelson André
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


0
0
20 Nov 2014
Copy Link
2019-12-11 17-59-12
Nelson André
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.
0
0
20 Nov 2014
Copy Link
2013-06-13 01-27-39
José Caldeira
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,
0
0
20 Nov 2014
Copy Link
2019-12-11 17-59-12
Nelson André
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>
"
0
0
27 Nov 2014
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.