Google Maps API v3, Gray Box, no map -
i want show multiple point database ,i'm getting gray box, controls , google logo/copyright code follows,
<? $dbname='usedb' ; //name of database $dbuser='user' ; //username db $dbpass='pwd' ; //password db $dbserver='localhost' ; //name of mysql server $dbcnx=m ysql_connect ( "$dbserver", "$dbuser", "$dbpass"); mysql_select_db("$dbname") or die(mysql_error()); ?> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>google map api v3 markers</title> <style type="text/css"> body { font: normal 10pt helvetica, arial; } #map { width: 350px; height: 300px; border: 0px; padding: 0px; } <script src="http://maps.googleapis.com/maps/api/js?api_key"></script> <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> <script type="text/javascript"> var icon=new google.maps.markerimage("http://maps.google.com/mapfiles/ms/micons/blue.png",new google.maps.size(32,32),new google.maps.point(0,0),new google.maps.point(16,32)); var center=null; var map=null; var currentpopup; var bounds=new google.maps.latlngbounds(); function addmarker(lat,lng,info) { var pt=new google.maps.latlng(lat, lng); bounds.extend(pt); var marker=new google.maps.marker( { position: pt, icon: icon, map: map }); var popup=new google.maps.infowindow( { content: info, maxwidth: 300 }); google.maps.event.addlistener(marker,"click",function() { if (currentpopup !=null) { currentpopup.close(); currentpopup=null; } popup.open(map,marker); currentpopup=popup; }); google.maps.event.addlistener(popup,"closeclick",function() { map.panto(center); currentpopup=null; }); } function initmap() { map=new google.maps.map(document.getelementbyid("map"), { center: new google.maps.latlng(0, 0), zoom: 14, maptypeid: google.maps.maptypeid.roadmap, maptypecontrol: false, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.horizontal_bar }, navigationcontrol:true, navigationcontroloptions: { style: google.maps.navigationcontrolstyle.small } }); <? $query=mysql_query("select * devices"); while ($row=mysql_fetch_array($query)) { $name=$row['hostname']; $lat=$row['latitude']; $lon=$row['longitude']; $desc=$row['ipv4']; echo ("addmarker($lat, $lon,'<b>$name</b><br/>$desc');\n"); } ?> center=bounds.getcenter(); map.fitbounds(bounds); } </script> </head> <body onload="initmap()" style="margin:0px; border:0px; padding:0px;"> <div id="map" style="height: 500px; width: 500px;"></div> </body> </html> can tell me what's wrong code ? will/would appreciated?
as comment noted, please close <style> tag, change maps api reference there no key. when put in api reference, got error:
google has disabled use of maps api application. provided key not valid google api key, or not authorized google maps javascript api v3 on site. if owner of application, can learn obtaining valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#api_key
just put in <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
here good, working code snippet. use base , change options want. "makemarker" part want pull database.
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>google map api v3 markers</title> <style type="text/css"> body { font: normal 10pt helvetica, arial; } #map { width: 350px; height: 300px; border: 0px; padding: 0px; } </style> <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> </head> <body> <div id="map" style="height: 500px; width: 500px;"> <script type="text/javascript"> var mapopts = { maptypeid: google.maps.maptypeid.terrain, zoom: 2, center: new google.maps.latlng(20, 0) }; var map = new google.maps.map(document.getelementbyid("map"), mapopts); var infowindow = new google.maps.infowindow(); var markerbounds = new google.maps.latlngbounds(); var markerarray = []; function makemarker(options) { var pushpin = new google.maps.marker({ map: map }); pushpin.setoptions(options); google.maps.event.addlistener(pushpin, "click", function () { infowindow.setoptions(options); infowindow.open(map, pushpin); }); markerbounds.extend(options.position); markerarray.push(pushpin); return pushpin; } google.maps.event.addlistener(map, "click", function () { infowindow.close(); }); makemarker({ title: "test1", position: new google.maps.latlng(10, 10), content: "content1", icon: '' }); makemarker({ title: "test2", position: new google.maps.latlng(20, 20), content: "content2", icon: '' }); makemarker({ title: "test3", position: new google.maps.latlng(30, 30), content: "content3", icon: '' }); </script> </div> </html>
Comments
Post a Comment