Google Map API v3 issue

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="{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>
<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

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

What am I missing?



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

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

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

    // create map here    


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.)

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?



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: .

: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.



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.


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).



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!



… which brings me to my next questions.

How do I place a “pin” for the location?

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?



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

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