Google Maps API v3 | shows no map data

Question

i'm program a small javascript application for our local firefighter home. The application is a little like powerpoint etc. but in html. In this application i would show a google maps map with a route that shows the way from the firefighter home to the fire. I use jquery for requesting the data from the http server.

My Problem is that i have inserted the code for the google maps api and the browser shows me the maps object with the google logo and so on. But there is no map, there is only a gray background. With the mouse it seems that i can zoom in/out, scroll etc in the map (if i interact, in firebug comes datatransfers to the google api), but the map wasn't there.

My personal maps api key is inserted and if i delete it the plugin shows a failure. So i think that can't be the problem.

is there a problem with jquery and the maps api? Anyone else around having this problem?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/standard.css">
    <script src="./js/libs/jquery-1.9.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false">
    </script>
    <script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(50.98188, 6.78655),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
            window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
            map.setZoom(12);
            map.setCenter(new google.maps.LatLng(0, 0));
            window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
        }
    </script>
</head>
<body>
    <div id="site_content">
        <div id="head_left" class="background_box">
        </div>
        <div id="head_center" class="background_box">
            <div class="heading"></div>
        </div>
        <div id="head_right" class="background_box">
            <h1 class="date_data"></h1>
            <h1 class="time_data"></h1>
        </div>
        <div class="spacing_data"></div>
        <div id="data_box" class="background_box">
            <div id="map_canvas" style="width: 100%;height: 100%"></div>
        </div>
        <div class="spacing_data"></div>
        <div id="footer_left" class="background_box">
        </div>
        <div id="footer_center" class="background_box">
            <div class="footer"></div>
        </div>
        <div id="footer_right" class="background_box">
        </div>
    </div>
    <script>
        jQuery.getScript("./js/initialisation.js",function(){initialisation();});
        initialize();
    </script>
</body>

there is no content because this is all loaded at runtime from the server over jquery and then inserted into dom.

possible duplicate of [Google Maps V3, Map won't display when wrapped in a second div](http://stackoverflow.com/questions/10675075/google-maps-v3-map-wont-display-when-wrapped-in-a-second-div) — geocodezip, Aug 16 '13 at 13:10
Let's assume that it's not the CSS-issue with the missing height of #map_canvas(as I understand it, the map is visible, but doesn't load any tiles)...we need more details, because this can't be answered by the given code. Please post the contents of initialisation.js and standard.css — Dr.Molle, Aug 16 '13 at 15:37

score 2 · Answer 1 · answered Aug 16 '13 at 13:16

See Mike Williams' description on percentage sized maps from his v2 tutorial

You need to add definitions to all the parent elements of the map to allow the browser to calculate a non-zero size.

working example

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html,body {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(50.98188, 6.78655),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
            window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
            map.setZoom(12);
            map.setCenter(new google.maps.LatLng(0, 0));
            window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
        }
google.maps.event.addDomListener(window,"load",initialize);
</script>
</head>
<body>
    <div id="site_content" style="width: 100%;height: 100%;">
        <div id="head_left" class="background_box" >
        </div>
        <div id="head_center" class="background_box">
            <div class="heading"></div>
        </div>
        <div id="head_right" class="background_box">
            <h1 class="date_data"></h1>
            <h1 class="time_data"></h1>
        </div>
        <div class="spacing_data"></div>
        <div id="data_box" class="background_box" style="width: 100%;height: 100%;">
            <div id="map_canvas" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="spacing_data"></div>
        <div id="footer_left" class="background_box">
        </div>
        <div id="footer_center" class="background_box">
            <div class="footer"></div>
        </div>
        <div id="footer_right" class="background_box">
        </div>
    </div>
</body>
</html>

duncan · Answer 2 · 2015-10-29T08:15:21.993

I didn't see anything obviously wrong, but this worked for me. Might just be a CSS problem.

<!DOCTYPE html>
<html>
<head>
<title></title>
<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>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

<script>
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(50.98188, 6.78655),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
        window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
        map.setZoom(12);
        map.setCenter(new google.maps.LatLng(0, 0));
        window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map_canvas"></div>
</body>
</html>

score 0 · Answer 3 · answered Aug 19 '13 at 08:58

now all its fine with the map. Thank you all for your help.

Now after the debugging i knew that i have had two problems in my code before. 1. The percentage size map problem 2. my div boxes where defined with overflow: hidden. after i have deleted this declaration now the complete map is shown.

Like at the beginning: Thank you

score 0 · Answer 4 · answered Oct 28 '15 at 23:54

0

In my case it was a problem with styles, first I've disabled all of them to see what happens, and because maps showed up I new they were responsible. Then I turned all the styles back and deleted line by line to see which one was responsible.

answered Oct 28 '15 at 23:54

Picard

3,745
3
41
50

score 0 · Answer 5 · answered Jul 13 '16 at 00:21

<!-- Preloader -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/cookie.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<!-- Optional theme -->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<!-- Good default declaration:
* gap: is required only on iOS (when using UIWebView) and is needed for JS-   >native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
* Enable eval(): add 'unsafe-eval' to default-src
* Create your own at http://cspisawesome.com
-->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

try this ....

Hi Amr, welcome to StackOverflow. Code only answers are discouraged here as they are unclear and don't teach anything. Can you please edit your answer to describe why this solves the OP's problem, and what it does? Thanks. — Tim Malone, Jul 13 '16 at 00:54

Google Maps API v3 | shows no map data

5 Answers5

Linked

Related