0

Well as the title suggests, I have implemeted a very SIMPLE google maps into my wordpress page.

I stripped it down as much as possible to the following in the head:

<style>
      #map-canvas {
        height: 700px;
        width: 700px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 8,
    center: {lat: -34.397, lng: 150.644}
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

I have a div id='map-canvas' in the body.

The code is correct as I have ran it with jsfiddle: https://jsfiddle.net/oLyz8ge0/

The temp web page with the code on my wordpress site is located here: http://www.worldheritagetrip.com/unesco-world-heritage-list/

I have spent days and days trying to figure this out.

The major issue is the problem is INTERMITTENT !!

So if you go to the page it may load the first, click refresh - it may load, it may not. It is completely random.

When I started the webpage I was a newbie and fiddeled around a lot with JS and installed MANY wordpress plugins. since then I have refined my JS skills and think 'i know what I am doing' now. However, I fear that somewhere in my tinkering I screwed something up - I don't know. It doesn't explain the randomness though.

ALSO: I found in chrome and firefox the problem is the worst - surprisingly on my iPphone (chrome and safari) it loads everytime! and in IE (WTF?)!!

Can someone help me out here?

sci-guy
  • 2,394
  • 4
  • 25
  • 46
  • Your Javascript is probably running before the api is completely loaded. In this case, it doesn't know what google.maps.event is. – Seano666 Jun 29 '15 at 21:50
  • 1
    for me nothing works on your page, maybe because of the type of your scripts( text/rocketscript ) . Maybe you'll find useful information here: http://stackoverflow.com/questions/9681032/why-is-wordpress-placing-text-rocketscript-instead-of-text-javascript-when-u – Dr.Molle Jun 29 '15 at 22:09
  • What do you mean nothing is working? I stripped down everything on that page. Should just be a google maps (again, sometimes it loads, sometimes it doesn't) – sci-guy Jun 29 '15 at 22:19
  • In addition... the problem does not occur with IE or iPhone. just with desktop chrome / firefox. – sci-guy Jun 29 '15 at 22:22
  • I mean: no map, ever(chrome). It's doesn't load the maps-API at all. – Dr.Molle Jun 29 '15 at 22:35
  • 1
    the problem is you are loading the google file async, you'd be better loading sync which is blocking, @Dr.Molle has linked to a page explaining how to load the file sync or you need to find a way to add the function initialize to when the file is loaded maybe `jQuery(window).onload()` ? – David Jun 30 '15 at 01:02
  • That seems to have done the trick :) It is cloudflare tech that caused the problem - rocketscript - or whatever. Disabling that seems to have worked. THANK YOU! – sci-guy Jun 30 '15 at 08:05

0 Answers0