Google Map- API loading is very slow

Question

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"> <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>

Their are directive available for Google Maps for AngularJS and UI Maps Look @ angular-google-maps.org and angular-ui.github.io/ui-map — JQuery Guru
– JQuery Guru, Commented Jan 31, 2014 at 5:46

Community · Accepted Answer · 2017-05-23 12:30:00Z

1

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() { $("#maps12").hide(); $("button").click(function() { $("#maps12").show(); google.maps.event.trigger(map, "resize"); }); });

JSFiddle

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Jan 31, 2014 at 5:41

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Praveen Over a year ago

@NishanShah I don't understand what is not working, see here(fiddle 1) I have reproduced your problem and the fix in my answer. If still exists create a fiddle so that I can help you.

Nishan Shah Over a year ago

Its working perfectly but the loading time is very more... what should I do??

Praveen Over a year ago

@NishanShah hmm, I don't find slowness in fiddle. Not working in your project? If possible share the url, let me try?

Collectives™ on Stack Overflow

Google Map- API loading is very slow

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related