Google-Map - API laden ist sehr langsam

Meine Seite geladen wurde mit google map aber mit Jquery bin ich es versteckt. Klicken Sie auf der Schaltfläche angezeigt werden soll meine google-Karte geladen, die Seite. aber ich bin nicht in der Lage zu sehen, die komplette Karte,also bin sehen nur einen Teil der Karte.
Unten ist mein code:-

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style id="my-css">
map,div[map] {
    display: block;
    width: 600px;
    height: 400px
}
</style>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="scripts/plunkr.js"></script>
<script src="scripts/app.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew">    </script>

<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:7,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
$(document).ready(function(){

$("#maps12").hide();
$("button").click(function(){
$("#maps12").show();
});
});
</script>
<script src="../dist/ng-map.min.js"></script>
</head>

<body>
    <div class="main">
        <header> 
        DEMO    
        </header>
        <section>
        <div id="maps12">
            <div id="map-canvas" style="width: 600px; height: 400px"></div>
            </div>
        </section>
        <footer>
        <button>click me</button>   
        </footer>
    </div>
</body>
</html>
InformationsquelleAutor Nishan Shah | 2014-01-31
  1. 1

    Du bist das laden der Google Karten mit Fenster onload Veranstaltungen und für ein hidden-element. Dann sind Sie wieder zeigen, dass Sie es also die Karten ist etwas fest zu bekommen in der Größe verändert.

    Also wenn man den div, auslösen der resize event von Google maps wie

    $(document).ready(function() {
    $("#maps12").hide();
    $("button").click(function() {
        $("#maps12").show();
        google.maps.event.trigger(map, "resize");
    });
});

    JSFiddle

    • Seine immer noch nicht funktioniert, dude!! Was soll ich tun?
    • Ich verstehe nicht, was nicht funktioniert, siehe hier(fiddle 1) habe ich reproduziert das problem und der fix in meiner Antwort. Wenn noch vorhanden ist, erstellen Sie ein Turnschuh, damit ich Ihnen helfen kann.
    • Seine arbeiten perfekt, aber die Ladezeit ist sehr mehr... was soll ich tun??
    • aber es ist nicht die Arbeit im Projekt @Praveen
    • hmm, ich finde nicht, Langsamkeit bei der Geige. Nicht arbeiten in Ihrem Projekt? Wenn möglich teilen Sie die url, lassen Sie mich versuchen?
    InformationsquelleAutor Praveen
Schreibe einen Kommentar