SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    maps API cannot see canvas DIV

    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. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bdee1 View Post
    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 () {
    The above error means that you don't have the jQuery library loaded.
    Can you link us to the instructions that you are following?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Can you make the development code for what you're working on available? The compressed code is not easy to work with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure no problem - here is the code for the page template which I am working with:
    Code:
    <?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. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bdee1 View Post
    sure no problem - here is the code for the page template which I am working with:
    Thanks - I see that the jQuery library is missing from that template code that you posted too.

    The following should help:

    HTML Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought that wordpress was loading it... its not throwing a query error anymore...


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •