Google Map API v3 issue

JavaScript
1

Hello, all,

I’m venturing into unfamiliar territory - Google Map API.

Here’s the code I have, so far. This is just testing, really. Nothing specific, yet.

Near the top of my page, I have:

<script src="https://maps.googleapis.com/maps/api/js?key={my api key}"></script>

Now, this is looping from a database query, but just one iteration looks like:

<div class="six columns">
     <div id="map_7AA439DB-C7E4-233B-F6A406B17A4F3690"></div>
</div>
<script type="text/javascript">
      map = new google.maps.Map(document.getElementById('map_7AA439DB-C7E4-233B-F6A406B17A4F3690'),{
		center: {lat: 38.738602, lng: -90.382196},
		zoom: 14
		});
</script>

Nothing is appearing where the map should be. Total blank.

What am I missing?

V/r,

:slight_smile:

UPDATE: I applied style to the map div for display:inline; height: 200px; width: 200px;, but it had no effect.

2

Make sure that you create a new map only when all scripts was loaded.:

google.maps.event.addDomListener(window, 'load', function(){

    // create map here    

});
3

Well…inline elements can’t accept height / width values so that was useless, what you did :slight_smile: . Try inline-block (if you want inline capabilities but the ability to set width/heights.)

4

I’m loading the Map API synchronously at the top of the page. Currently, it’s looping a database query and inserting the map DIV followed by a <script> block that inits the map. Should I loop the query twice? Once for the DIV and then again at the bottom of the page for the script?

V/r,

:slight_smile:

5

Wolfshade, can you go into the devtools and see if the HTML is being inserted, but there is just no width/height? Your previous posts make me think it’s POSSIBLE (although not likely) that the iframe is just collapsed in height. I know you are DoD so I highly doubt you’ll allow me/us access to the page :slight_smile: .

6

:slight_smile: This time, allowing has nothing to do with it. This is for a project I’m working on at home, and my personal dev environment is not accessible from outside my network (much like my work dev environment, but for a different reason.) I have two routers that I’m behind, and I don’t know how to set up port forwarding for one, much less TWO. Otherwise, I would.

I’m not at home, now, so cannot comply with your devtools request, at this time. I can tell you that the code I provided in my first post was a copy/paste from a “view source” of the page in question. I will try to remember to look at the DOM, tonight.

V/r,

:slight_smile:

7

Okay… I can confirm that the code created by Google Maps API is being inserted into the DOM. I took a screencap. Let me see if it will paste, here.

1194×610 124 KB

Yay.

So… all the code contained within the DIV that has the id that begins with “map_” is not code I wrote. I have to assume that the API wrote it. Yet it still isn’t displaying anything in the browser (IE11, FF).

V/r,

:slight_smile:

8

Och… nevermind… @RyanReese hit the nail on the heed.

I added a class to my .css file called “map”, set for display:inline-block; width:450px; height:300px; and now the map is showing.

SO… inline styles fail.

Thanks, Ryan!

V/r,

:slight_smile:

9

… which brings me to my next questions.

How do I place a “pin” for the location?
(ANSWER: HERE)

How do I make it so that when a user clicks on the pin, it asks for an address for driving directions?

How do I get this to work with an address instead of latitude and longitude?
(ANSWER: HERE)

V/r,

:slight_smile:

10

Are you sure? Or is it due to the fact you originally set (inline) display:inline; and that can’t accept widths/heights? I would lean towards this being the reason, apposed to inline styling not working.

1 Like
11

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