Php 使用谷歌地图api查看空白页面_Php_Javascript_Google Maps Api 3

Php 使用谷歌地图api查看空白页面

php javascript google-maps-api-3

Php 使用谷歌地图api查看空白页面,php,javascript,google-maps-api-3,Php,Javascript,Google Maps Api 3,根据下面的链接，我正在尝试使用谷歌地图，用户可以单击地图指定位置，但我只看到一个空白屏幕：我根据此处的链接进行了一些更改，但没有更改： Google Chrome控制台出现如下错误：未捕获的语法错误：意外标记

根据下面的链接，我正在尝试使用谷歌地图，用户可以单击地图指定位置，但我只看到一个空白屏幕：

我根据此处的链接进行了一些更改，但没有更改：

Google Chrome控制台出现如下错误：未捕获的语法错误：意外标记以下代码中突出显示的相应行：

<!DOCTYPE html>
<!--
 Copyright 2008 Google Inc.
 Licensed under the Apache License, Version 2.0:
 http://www.apache.org/licenses/LICENSE-2.0
 -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Saving User-Added Form Data Example</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var marker;
    var infowindow;

    function initialize() {
      var latlng = new google.maps.LatLng(37.4419, -122.1419);
      var options = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      google.maps.event.addDomListener(window, 'load', initialize);
      var map = new google.maps.Map(document.getElementById("map_canvas"), options);
      var html = "<table>" +
                 "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
                 "<tr><td>Email:</td> <td><input type='text' id='email'/></td> </tr>" +
                 "<tr><td>Phone:</td> <td><input type='text' id='phone'/></td> </tr>" +
                 "<tr><td>Town:</td> <td><input type='text' id='town'/></td> </tr>" +
                 "<tr><td>County:</td> <td><select id='county'>" +
                 **<option value='Outside Ireland' SELECTED>OutsideIreland</option> +**
                 <option value='Antrim' SELECTED>Antrim</option> +
                 <option value='Armagh' SELECTED>Armagh</option> +
                 <option value='Carlow' SELECTED>Carlow</option> +
                 <option value='Cavan' SELECTED>Cavan</option> +
                 <option value='Clare' SELECTED>Clare</option> +
                 <option value='Cork' SELECTED>Cork</option> +
                 <option value='Derry' SELECTED>Derry</option> +
                 <option value='Donegal' SELECTED>Donegal</option> +
                 <option value='Down' SELECTED>Down</option> +
                 <option value='Dublin' SELECTED>Dublin</option> +
                 <option value='Fermanagh' SELECTED>Fermanagh</option> +
                 <option value='Galway' SELECTED>Galway</option> +
                 <option value='Kerry' SELECTED>Kerry</option> +
                 <option value='Kildare' SELECTED>Kildare</option> +
                 <option value='Kilkenny' SELECTED>Kilkenny</option> +
                 <option value='Laois' SELECTED>Laois</option> +
                 <option value='Leitrim' SELECTED>Leitrim</option> +
                 <option value='Limerick' SELECTED>Limerick</option> +
                 <option value='Longford' SELECTED>Longford</option> +
                 <option value='Louth' SELECTED>Louth</option> +
                 <option value='Mayo' SELECTED>Mayo</option> +
                 <option value='Meath' SELECTED>Meath</option> +
                 <option value='Monaghan' SELECTED>Monaghan</option> +
                 <option value='Offaly' SELECTED>Offaly</option> +
                 <option value='Roscommon' SELECTED>Roscommon</option> +
                 <option value='Sligo' SELECTED>Sligo</option> +
                 <option value='Tipperary' SELECTED>Tipperary</option> +
                 <option value='Tyrone' SELECTED>Tyrone</option> +
                 <option value='Waterford' SELECTED>Waterford</option> +
                 <option value='Westmeath' SELECTED>Westmeath</option> +
                 <option value='Wexford' SELECTED>Wexford</option> +
                 <option value='Wicklow' SELECTED>Wicklow</option> +
                 "</select> </td></tr>" +
                 "<tr><td>Name of Location:</td> <td><input type='text' id='location'/></td> </tr>" +
                 "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";

    infowindow = new google.maps.InfoWindow({
     content: html
    });

    google.maps.event.addListener(map, "click", function(event) {
        marker = new google.maps.Marker({
          position: event.latLng,
          map: map
        });
        google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
        });
    });
    }

    function saveData() {
      var name = escape(document.getElementById("name").value);
      var address = escape(document.getElementById("address").value);
      var type = document.getElementById("type").value;
      var latlng = marker.getPosition();

      var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
      downloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
          infowindow.close();
          document.getElementById("message").innerHTML = "Location added.";
        }
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
    </script>
  </head>

  <body>
  <div id="map_canvas" style="height: 100px; width=100px;"></div>
  **<script type="text/javascript">initialize();</script>**
</body>
  <!-- Commenting out line to edit suggestion from stackoverflow
  <body style="margin:0px; padding:0px;" onload="initialize()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <div id="message"></div>
  </body> -->
</html>


保存用户添加的表单数据示例
var标记；
var信息窗口；
函数初始化（）{
var latlng=新的google.maps.latlng（37.4419，-122.1419）；
变量选项={
缩放：13，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
var map=new google.maps.map（document.getElementById（“map_canvas”），选项）；
var html=“”+
“姓名：”+
“电子邮件：”+
“电话：”+
“城镇：”+
“县：”+
**爱尔兰境外+**
安特里姆+
阿尔马+
卡洛+
卡万+
克莱尔+
软木塞+
德里+
多尼格尔+
向下+
都柏林+
费马纳+
戈尔韦+
克里+
基尔代尔+
基尔肯尼+
劳伊斯+
莱特里姆+
利默里克+
朗福德+
劳斯+
梅奥+
肉+
莫纳汉+
杂碎+
罗斯康姆+
斯莱戈+
小费+
泰龙+
沃特福德+
韦斯特米思+
韦克斯福德+
威克洛+
" " +
“位置名称：”+
"";
infowindow=新建google.maps.infowindow({
内容：html
});
google.maps.event.addListener（映射，“单击”，函数（事件）{
marker=新的google.maps.marker({
位置：event.latLng，
地图：地图
});
google.maps.event.addListener（标记“单击”，函数（）{
信息窗口。打开（地图、标记）；
});
});
}
函数saveData（）{
var name=escape（document.getElementById（“name”）.value）；
var address=escape（document.getElementById（“address”）.value）；
var type=document.getElementById（“type”）.value；
var latlng=marker.getPosition（）；
var url=“phpsqlinfo\u addrow.php？name=“+name+”&address=“+address+
“&type=“+type+”&lat=“+latlng.lat（）+”&lng=“+latlng.lng（）”；
下载url（url、函数（数据、响应代码）{
if（responseCode==200&&data.length
从这里开始的语法无效：
**爱尔兰境外+**

看起来您正试图使用javascript连接语法连接所有的选项
。如果您这样做，则需要在所有选项
周围添加双引号
另一种方法是删除所有+
，只在html var
字符串的开头和结尾使用双引号。
您的注释是正确的，没有调用initialize（）@sandy改为注释掉了初始值，但注释完全相同，但行不同**只是为了突出显示粗体文本，但我添加了双引号，并显示了地图。这很有效。谢谢。