JQuery is not defined when trying to embed Google map

JavaScript
1

Hi there guys,

I took a tutorial on embedding Google maps into your web page and stripped it of all superfluous content to end up with a page containing just the elements of the map. You can find that here.

Then I tried to take those elements and place them in my webpage, which you can find here.

I’ve read up on this error and although there seems to be many causes, the most popular seems to be that javascript is trying to run prior to jquery being called. I’m not sure if that’s my issue or not though. Could someone take a look at the links and see why I’m not getting the map to show in the page located at the second link?

thanks for your time!

2

Hi,

You’re calling jQuery before it is loaded, essentially:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <p></p>

    <script>
      jQuery('p').text('Yo!');
    </script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  </body>
</html>

This will result in:

ReferenceError: jQuery is not defined

Turning things around solves the problem:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  jQuery('p').text('Yo!');
</script>

Not sure if this is the exact cause of your error (I didn’t look), but it’s something you’ll need to sort out before proceeding.

3

Hi James and thanks very much for your help!

I tried moving jquery all the way up right below body start and it did get rid of the error but the map still continues to not show: https://scotchandiron.org/fivemin/1.html

I’m not seeing anything in console that would cause it to not work.

4

There are three errors there. Could they be causing JS to not run?

What happens to your minimal demo when you address the jQuery issue.

5

Went ahead and stripped the offending code out, removing all errors. Map still refuses to show, unfortunately: https://scotchandiron.org/fivemin/1.html

6

The thing is, there’s no issue on the minimal demo. The map shows and there are 0 errors. I only have an issue when moving the code to the page I’d like to embed the map on.

7

The problem is that you’re forgetting to give the map container any dimensions.

On the page that works you have:

#map_wrapper {
  height: 400px;
}

#map_canvas {
  width: 100%;
  height: 100%;
}

Add that to the page you’re trying to make the map display on and all will be well :slight_smile:

1 Like
8

[EDIT] I am mistaken, sorry for the quick post…

9

I accidentally placed the style in a conditional PHP include that didn’t get triggered on that page. Once I fixed that mess up, it showed up just great. Thank you so much for all your help!

1 Like
10

No worries. Glad you got it sorted.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.