javascript - InfoBubble not defines from google maps v3 api -
i trying use infobubbles google api v3 mobile application. code copied https://github.com/googlemaps/js-info-bubble
and these js files
var map = null, airboxobjects = {}, locationobjects = {}, lastmeasurements = {}; var infobubble = new infobubble({ minheight: 200, minwidth: 200, maxwidth: 300, disableautopan: true }); function getqueryvariable(key) { var query = window.location.search.substring(1); var vars = query.split("&"); (var i=0; i<vars.length; i++) { var pair = vars[i].split("="); if(pair[0] == key) { // key found, return value return pair[1]; } } // key not found, return null return null; } .....
and html
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <style> @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; } @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; } </style> <link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less"> <script type="text/javascript" src="cordova.js" id="xdkjscordova_"> </script> <script type="text/javascript" src="js/init-app.js"></script> <script type="text/javascript" src="xdk/init-dev.js"></script> <script type="text/javascript" src="js/config.js"></script> <script type="text/javascript" src="js/thresholds.js"></script> <script type="text/javascript" src="js/api.js"></script> <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/infobubble-compiled.js"></script> <script type="text/javascript" src="js/infobubble.js"></script> <link rel="stylesheet" href="css/style.css"> <script type="application/javascript" src="lib/jquery.min.js"></script> <script type="application/javascript" src="google_maps/google_maps.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=123456dummykey" type="text/javascript"></script> <script src="js/jquery-3.1.1.min.js"></script> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> var script = '<script src="js/infobubble'; if (document.location.search.indexof('compiled') !== -1) { script += '-compiled'; } script += '.js"><' + '/script>'; document.write(script); </script> </head> <body> <div id="mainpage"> <div id="map-canvas" ></div> </div> </body> and when build , run project on emulator. map shown not locations want. random location. , error infobubble js file in line :
var infobubble = new infobubble({ minheight: 200, minwidth: 200, is no defined. , gives me warning keyapi missing. can see have key , did activate it.
can please tell me im doing wrong ?
i think might have misplaced instantiation of infobubble variable. suggest using guide infowindows in google js maps api. it's pretty straightforward , easy follow. here's snippet sample related code:
function initmap() { var uluru = {lat: -25.363, lng: 131.044}; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 4, center: uluru }); var contentstring = '<div id="content">'+ '<div id="sitenotice">'+ '</div>'+ '<h1 id="firstheading" class="firstheading">uluru</h1>'+ '<div id="bodycontent">'+ '</div>'+ '</div>'; var infowindow = new google.maps.infowindow({ content: contentstring }); var marker = new google.maps.marker({ position: uluru, map: map, title: 'uluru (ayers rock)' }); marker.addlistener('click', function() { infowindow.open(map, marker); }); } 
Comments
Post a Comment