html5 - Adding Geolocation Google Map Failed -
i still new html5 trying add google map geolocation , few points people can find. when refresh page after submitting code doesn't appear. can please tell me i'm going wrong or correct code?
the site isn't complex, here's code:
<!doctype html> <!--[if lt ie 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if ie 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if ie 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt ie 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> body { padding-top: 50px; padding-bottom: 20px; } </style> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> </head> <body> <!--[if lt ie 7]> <p class="browsehappy">you using <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade browser</a> improve experience.</p> <![endif]--> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand active" href="index.html">smart homes<span class="sr-only"></span></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="testimonial.html">testimonials<span class="sr-only">(current)</span></a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">thermostat<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="mobilethermostat.html">mobile thermostat</a></li> <li><a href="installation.html">installation</a></li> </ul> </li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">ordering info<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">how order/cost</a></li> <li><a href="#">new letter registration</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">energy saving <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="tips.html">energy tips</a></li> <li><a href="tutorial.html">take tour</a></li> <li class="divider"></li> <li><a href="#">faq</a></li> </ul> </li> <li><a href="#">contact us<span class="sr-only"></span></a></li> </ul> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder="email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="password" class="form-control"> </div> <button type="submit" class="btn btn-success">sign in</button> </form> <div> <a href="registerwithsmarthomes.html">create account</a> </div> </div><!--/.navbar-collapse --> </div> </nav> <!-- main jumbotron primary marketing message or call action --> <div class="jumbotron"> <div class="container"> <h1>find our products nearby </h1> <h2>use our map</h2> <p> use our map below find location near you. </p> </div> <div> <script> function initmap() { var map = new google.maps.map(document.getelementbyid('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 13 }); var infowindow = new google.maps.infowindow({map: map}); // try html5 geolocation. if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; infowindow.setposition(pos); infowindow.setcontent('location found.'); map.setcenter(pos); }, function() { handlelocationerror(true, infowindow, map.getcenter()); }); } else { // browser doesn't support geolocation handlelocationerror(false, infowindow, map.getcenter()); } } function handlelocationerror(browserhasgeolocation, infowindow, pos) { infowindow.setposition(pos); infowindow.setcontent(browserhasgeolocation ? 'error: geolocation service failed.' : 'error: browser doesn\'t support geolocation.'); } </script> </div> <div class="container"> <!-- example row of columns --> <div class="row"> <div class="col-md-4"> <h2>mobile thermostat</h2> <p>learn more mobile thermostat following link. </p> <p><a class="btn btn-default" href="mobilethermostat.html" role="button">view details »</a></p> </div> <div class="col-md-4"> <h2>ordering , cost</h2> <p>get cost , ordering information here. you'll surprised , how economical smart homes mobile thermostat system is, , how save on time. </p> <p><a class="btn btn-default" href="#" role="button">view details »</a></p> </div> <div class="col-md-4"> <h2>customer testimonials</h2> <p>find out how our customers feel decision buy our system, , how has improved lives, reduced costs, providing comfort , convenience.</p> <p><a class="btn btn-default" href="testimonial.html" role="button">view details »</a></p> </div> </div> <hr> <footer> <p>© smart homes inc. 2015</p> </footer> </div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script>window.jquery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/main.js"></script> <script src="js/playvidoechosen.js"></script> <!-- google analytics: change ua-xxxxx-x site's id. --> <script> (function (b, o, i, l, e, r) { b.googleanalyticsobject = l; b[l] || (b[l] = function () { (b[l].q = b[l].q || []).push(arguments) }); b[l].l = +new date; e = o.createelement(i); r = o.getelementsbytagname(i)[0]; e.src = '//www.google-analytics.com/analytics.js'; r.parentnode.insertbefore(e, r) }(window, document, 'script', 'ga')); ga('create', 'ua-xxxxx-x'); ga('send', 'pageview'); </script> </body> </html>
did add div id 'map' html code? because did not find div id 'map' in code. maybe need add following code.
<div id="map"></div>
Comments
Post a Comment