Reputation: 11

Google Maps API v3 | shows no map data

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.

Upvotes: 1

Answers (5)

Amr Mohamed

Reputation: 3

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

Upvotes: 0

duncan

Reputation: 31912

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>

Upvotes: 1

Picard

Reputation: 4102

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.

Upvotes: 0

user2689153

Reputation: 11

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

Upvotes: 0

geocodezip

Reputation: 161324

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>

Upvotes: 2

Google Maps API v3 | shows no map data

Answers (5)

Related Questions