javascript - Why when I load google maps, it does not display the location I want -
when load google map navigation specific coords, map not center display location have set. why this? , how go fixing it?
my script code: functional webpage, when place google map within accordion reason location of map not work.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta charset = "utf-8"> <title>london tour guide</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <script src="jquery.js"></script> <style> div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px; background-color: white; } div.content { width: 700px; height: 1200px; background-color: lightblue; padding: 5px; } h1.welcome {font-family: verdana, sans-serif; color: orangered; text-align: center; text-shadow: 2px 2px grey; transition: 4s;} h1.stpauls{font-family: verdana, sans-serif; color: orangered; text-align: center; } h1.welcome:hover{transform: rotatex(360deg); color:yellow; } p.medium { font-size: 12pt; font-family: "palatino linotype", "book antiqua", palatino, serif; color: #333; } p.small { font-size: 12pt; font-family: "palatino linotype", "book antiqua", palatino, serif; color: #333; } img { display: block; margin: auto; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropbtn1 { background-color: #4caf50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn1:hover, .dropbtn1:focus { background-color: #3e8e41; } .dropdown1 { position: relative; display: inline-block; } .dropdown1-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown1-content { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown1-content a:hover {background-color: #f1f1f1} .show{display:block;} button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { padding: 0 18px; display: none; background-color: white; } div.panel.show { display: block; } </style> </head> <body> <div class="container"> <div class = "content"> <div class = "header"> <img src = "headerlondon.jpg" alt = "header"></div> <ul> <li><a class="active" href="project.html">home</a></li> <li><a href="map.html">maps </a></li> <li class="dropdown"> <a href="#" class="travel">travel <i class="fa fa-caret-down"></i></a> <div class="dropdown-content"> <a href="bus.html">bus</a> <a href="taxi.html">taxi</a> <a href="tube.html">tube</a> </div> </li> <li class="dropdown"> <a href="#" class="sightseeing">sightseeing <i class="fa fa-caret-down"></i></a> <div class="dropdown-content"> <a href="londoneye.html">london eye</a> <a href="toweroflondon.html">tower of london</a> <a href="bigben.html">big ben</a> <a href="stpaulscathedral.html">st pauls cathedral</a> <a href="buckinghampalace.html">buckingham palace</a> <a href="westminister.html">westminister</a> </div> </li> <li class="dropdown"> <a href="#" class="museums">museums <i class="fa fa-caret-down"></i></a> <div class="dropdown-content"> <a href="britishmuseum.html">british museum</a> <a href="sciencemuseum.html">science museum</a> <a href="nationalhistorymuseum.html">national history museumm</a> </div> </li> </ul> <h1 class = "stpauls"> st pauls cathedral</h1> <button class="accordion">navigation</button> <div class="panel"> <div id="map" style="left:150px;width:60%;height:300px"></div> </div> </div> <script> var acc = document.getelementsbyclassname("accordion"); var i; (i = 0; < acc.length; i++) { acc[i].onclick = function(){ this.classlist.toggle("active"); this.nextelementsibling.classlist.toggle("show"); } } </script> <script> var acc = document.getelementsbyclassname("accordion"); var i; (i = 0; < acc.length; i++) { acc[i].onclick = function() { this.classlist.toggle("active"); this.nextelementsibling.classlist.toggle("show"); google.maps.event.trigger(map, "resize"); } } function mymap() { var mapcanvas = document.getelementbyid("map"); var mycenter = new google.maps.latlng(51.508742, -0.120850); var mapoptions = { center: mycenter, zoom: 10 }; var map = new google.maps.map(mapcanvas, mapoptions); var marker = new google.maps.marker({ position: mycenter }); marker.setmap(map); settimeout(function () { console.log(1); google.maps.event.trigger(map, "resize"); }, 1000); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=aizasyb37us778wynwnjhftum3ol2oduv_wot_e&callback=mymap"></script> </div> </body> </html>
i think should load google map api script before function.
Comments
Post a Comment