Google Map- API loading is very slow

My page has been loaded with google map but using Jquery i am hiding it. On click of button it should display my google map loaded in that page. but i am not able to see the full map,i.e. am seeing only a part of map. Below is my code:-

<!DOCTYPE html>
<html ng-app="myApp">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style id="my-css">
map,div[map] {
    display: block;
    width: 600px;
    height: 400px
<script src=""></script>
<script src="scripts/plunkr.js"></script>
<script src="scripts/app.js"></script>
<script type="text/javascript" src=";v=2&amp;sensor=true&amp;key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew">    </script>

    <script src="">
function initialize()
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);

google.maps.event.addDomListener(window, 'load', initialize);

<script src="../dist/ng-map.min.js"></script>

    <div class="main">
        <div id="maps12">
            <div id="map-canvas" style="width: 600px; height: 400px"></div>
        <button>click me</button>   


You're loading the Google maps using window's onload event and for a hidden element. Then you're again showing it so the maps is bit stuck to get resized.

So when you show the div, trigger the resize event of Google maps like

$(document).ready(function() {
    $("button").click(function() {
        google.maps.event.trigger(map, "resize");


Need Your Help

How to Change the Source of an Image W/JS

javascript html mouseenter mouseout

I have to change the src of an image using java script and I am pretty sure i hit a road block, in the html I have 3 li elements and in the id is the source of the mouseenter img. I feel like I am ...

How to load a nested JSON / C# array into view model? using Knockout, jQuery

c# javascript knockout.js viewmodel

SuperNoob here, trying to load varying multiple "Options" either as a string[] or object, to a "Product" that can be added to a shopping cart using Knockout: (working from John Papa's PluralSight