Maps API cannot see canvas DIV

JavaScript
1

I hope this is the right area to post this topic - if not please feel free to move it.

I am trying to use the Google Maps API to integrate a custom map into my wordpress site.

When I load the page I get the following js error:
TypeError: $ is not a function

$(document).ready(function () {

I have read that with the Google Maps API this error usually indicates that it can’t find the canvas element. If you look at the page, I specified a red border for the canvas div and when the page renders you can just see the top border of it.

any suggestions on how to get this working would be appreciated.

2

I Tried moving the initialize function from the document ready function to the body unload and now I am getting this error:
TypeError: a is null which am also finding to indicate that the google maps API can’t find the canvas element.

3

The above error means that you don’t have the jQuery library loaded.
Can you link us to the instructions that you are following?

4

you are correct - I discovered that shortly after posting and was able to work through that… so instead of using the document.ready to call the initialize function i tried calling it from the body unload attribute and now I am getting the following error:
TypeError: a is null

which according to a google search typically indicates that I am trying to initialize the maps API on an element that is not loaded yet… I am not sure why that is happening…

The page in question can be found here:
http://www.nyraen.org/raen-map-2/

5

Can you make the development code for what you’re working on available? The compressed code is not easy to work with.

6

sure no problem - here is the code for the page template which I am working with:


<?php
/*
Template Name: RAEN Map
*/
?>
<?php get_header(); ?>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>


  </head>
  <body >

<script type="text/javascript">
jQuery(document).ready(function(){
     initialize();
});

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

	//google.maps.event.addDomListener(window, 'load', initialize);
	
    </script>

<div style="margin-top:50px; border:1px solid #FF0000; width:400px; margin-left:auto; margin-right:auto;>Map Goes Here:<br>
       <div id="map-canvas-RAEN" style="width: 500px;height: 500px">
    </div>
</div>
  </body>
</html>


<?php get_footer(); ?>
7

Thanks - I see that the jQuery library is missing from that template code that you posted too.

The following should help:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
8

I thought that wordpress was loading it… its not throwing a query error anymore…