Google Maps API v3 | zeigt keine Kartendaten

Question

Aug 16, 2013, 02:33 PM

Google Maps API v3 | zeigt keine Kartendaten

Ich programmiere eine kleine Javascript-Anwendung für unser lokales Feuerwehrhaus. Die Anwendung ist ein bisschen wie Powerpoint usw., aber in HTML. In dieser Anwendung würde ich eine Google Maps-Karte mit einer Route anzeigen, die den Weg vom Feuerwehrhaus zum Feuer zeigt. Ich benutze jquery, um die Daten vom http-Server anzufordern.

Mein Problem ist, dass ich den Code für die Google Maps-API eingefügt habe und der Browser mir das Kartenobjekt mit dem Google-Logo usw. anzeigt. Es gibt aber keine Karte, es gibt nur einen grauen Hintergrund. Mit der Maus scheint es, dass ich in der Karte zoomen, scrollen usw. kann (wenn ich interagiere, kommt in Firebug Datentransfers auf die Google API), aber die Karte war nicht da.

Mein persönlicher Karten-API-Schlüssel wird eingefügt und wenn ich ihn lösche, zeigt das Plugin einen Fehler an. Also ich denke das kann nicht das Problem sein.

gibt es ein problem mit jquery und der maps api? Hat noch jemand dieses 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>

es gibt keinen inhalt, da dies alles zur laufzeit vom server über jquery geladen und dann in dom eingefügt wird.