Javascript Google Maps JS API V3 addMarker-标记在源代码中回响，没有地图_Javascript_Php_Mysql_Google Maps_Google Maps Api 3

Javascript Google Maps JS API V3 addMarker-标记在源代码中回响，没有地图

javascript php mysql google-maps google-maps-api-3

Javascript Google Maps JS API V3 addMarker-标记在源代码中回响，没有地图,javascript,php,mysql,google-maps,google-maps-api-3,Javascript,Php,Mysql,Google Maps,Google Maps Api 3,下面的代码应该生成一个google地图，从MySQL数据库中检索标记，并将它们绘制在地图上。相反，我得到的是一个没有错误的空白页面，当查看源代码时，所有addMarker点都会在那里回响。我做错了什么？我尝试将末尾的PHPDB查询部分移动到JS部分的外部，结果将addMarker db结果回显到实际页面，而不仅仅在源代码中可见 <?php $dbname ='edited out'; //Name of the database $dbuser

下面的代码应该生成一个google地图，从MySQL数据库中检索标记，并将它们绘制在地图上。相反，我得到的是一个没有错误的空白页面，当查看源代码时，所有addMarker点都会在那里回响。我做错了什么？我尝试将末尾的PHPDB查询部分移动到JS部分的外部，结果将addMarker db结果回显到实际页面，而不仅仅在源代码中可见

    <?php
$dbname            ='edited out'; //Name of the database
$dbuser            ='edited out'; //Username for the db
$dbpass            ='edited out'; //Password for the db
$dbserver          ='edited out'; //Name of the mysql server

$dbcnx = mysql_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>Stott Outdoor Advertising Experimental Inventory Map - SQL Version</title>
<style>
   html { height: 100%; }
   body { height: 100%; margin: 0; padding: 0; }
   #map_canvas { height: 100%; }
   </style>

     <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=edited out">
    </script>
 <script type="text/javascript">
 var icon = new google.maps.MarkerImage("edited out/gmaps/Bulletin-sm.png",
 new google.maps.Size(32, 32), new google.maps.Point(39.729468, -121.847099),
 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
 }
 });
 <? php
 $query = mysql_query("SELECT * FROM edited out");
 while ($row = mysql_fetch_array($query)){
 $name=$row['name'];
 $lat=$row['lat'];
 $lon=$row['lon'];
 $desc=$row['desc'];
 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"></div>
 </html>


斯托特户外广告实验库存地图-SQL版
html{高度：100%；}
正文{高度：100%；边距：0；填充：0；}
#地图画布{高度：100%；}
var icon=new google.maps.MarkerImage（“edited out/gmaps/Bulletin sm.png”，
新的google.maps.Size（32,32），新的google.maps.Point（39.729468，-121.847099），
新的google.maps.Point（16,32））；
var中心=null；
var-map=null；
var-currentPopup；
var bounds=new google.maps.LatLngBounds（）；
功能添加标记（lat、lng、info）{
var pt=新的google.maps.LatLng（lat，lng）；
边界扩展（pt）；
var marker=new google.maps.marker({
职位：pt，
图标：图标，
地图：地图
});
var popup=new google.maps.InfoWindow({
内容:信息,，
最大宽度：300
});
google.maps.event.addListener（标记“单击”，函数（）{
如果（currentPopup！=null）{
currentPopup.close（）；
currentPopup=null；
}
弹出。打开（地图、标记）；
当前弹出=弹出；
});
google.maps.event.addListener（弹出窗口“closeclick”，函数（）{
潘托地图（中）；
currentPopup=null；
});
}
函数initMap（）{
map=new google.maps.map（document.getElementById（“map”）{
中心：新google.maps.LatLng（0,0），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL\u栏
},
导航控制：对，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL
}
});
看起来您正在将地图的中心设置为0,0。请尝试使用latlgn的中心值初始化地图。
您的地图没有大小。您的css中有以下内容：
#map_canvas { height: 100%; }

但是，您的“map”div具有id“map”。这应该是：
#map { height: 100%; }


代码片段：

var icon=new google.maps.MarkerImage（“http://maps.google.com/mapfiles/ms/micons/blue.png",
新的google.maps.Size（32,32），新的google.maps.Point（0,0），
新的google.maps.Point（16,32））；
var中心=null；
var-map=null；
var-currentPopup；
var bounds=new google.maps.LatLngBounds（）；
功能添加标记（lat、lng、info）{
var pt=新的google.maps.LatLng（lat，lng）；
边界扩展（pt）；
var marker=new google.maps.marker({
职位：pt，
图标：图标，
地图：地图
});
var popup=new google.maps.InfoWindow({
内容:信息,，
最大宽度：300
});
google.maps.event.addListener（标记“单击”，函数（）{
如果（currentPopup！=null）{
currentPopup.close（）；
currentPopup=null；
}
弹出。打开（地图、标记）；
当前弹出=弹出；
});
google.maps.event.addListener（弹出窗口“closeclick”，函数（）{
潘托地图（中）；
currentPopup=null；
});
}
函数initMap（）{
map=new google.maps.map（document.getElementById（“map”）{
中心：新google.maps.LatLng（0,0），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL\u栏
},
导航控制：对，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL
}
});
$name=‘纽约’；
$lat=40.7127837；
$lon=-74.0059413；
$desc=‘纽约州纽约’；
addMarker（$lat、$lon、+$name+'
'+$desc）；
$name='Newark'；
$lat=40.735657；
$lon=-74.1723667；
$desc=‘新泽西州纽瓦克’；
addMarker（$lat、$lon、+$name+'
'+$desc）；
center=bounds.getCenter（）；
映射边界（bounds）；
}
google.maps.event.addDomListener（窗口，“加载”，initMap）；
html{
身高：100%；
}
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}

太棒了！我添加了一些真正的坐标，但不幸的是地图仍然没有显示。这无助于解决您的问题，但在js中，您不需要if“（x！=null）”。您可以只说“if（x）”.听起来很挑剔，但这是javascript的一个好部分。我不认为有什么问题——正如地理代码之前所建议的那样，尝试将其缩小到绝对必要的范围（使地图以pin显示在屏幕上）-然后将该示例集成到您的系统中。浏览器看到的代码是什么样子的？请提供一个演示该问题的示例。
#map { height: 100%; }