Yola Breaks Google Maps API, V3

  • 1
  • Problem
  • Updated 8 years ago
  • Solved
Yola appears to break Google Maps Javascript API Version 3.

here's the code i'm trying to add:
http://code.google.com/apis/maps/docu...

note, google maps api version 3 does not require an api key anymore. Version 2, which required a key, is being deprecated by google:
http://code.google.com/apis/maps/docu...

this example works perfectly outside the yola system, but not in yola. in yola. it seems there's some conflict between yola and the maps api, which breaks the maps api.
Photo of johnywhy

johnywhy

  • 34 Posts
  • 0 Reply Likes
  • confident

Posted 8 years ago

  • 1
Photo of johnywhy

johnywhy

  • 34 Posts
  • 0 Reply Likes
as an experiment, to determine if the problem is lack of access to the 'head' element in yola, i did the following:

i created an html page (outside of yola), and pasted all the google code into the 'body' of the page. the head is empty.

i also removed the 'body onload' attribute, and i moved all the script outside of 'function', so no function is called-- the script just runs whenever the browser gets to it.

aside from those two changes, the code is identical to the google helloworld code here:
http://code.google.com/apis/maps/docu...

the map loads perfectly when i open the page in my browser, even though none of the code is in the 'head'.

more proof that yola is breaking the google api:

code:

<div id="map_canvas" style="width:100%; height:100%"></div>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?se...;

<script type="text/javascript">
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

</script>

note, i'm opening the page from my local file-system-- it's not hosted on the web
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi Johnywhy,

I'm going to ask one of our engineers to take a look at the problem and come back to you.
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi Johnwhy,

I have this feedback from one of our engineers:

"The editor won't show the map as the javascript is stored, but not run. After publishing the site, the javascript will be live and the map will show up. Looking at the code in the google hello world example, the meta tag isn't essential, and the script can be moved into the body of the page without concern. The initialize function will just need to be run manually."

Here is the code that will work (ignore <!-- and --> those are there to stop the code from being interpreted0:

<!--
<div id="map_canvas" style="width:400px; height:400px; display:block;">CANVAS</div>

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?se...>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
initialize();

</script>
-->