TypeError：g未定义Google地图API

Question

我正在使用Google地图API。我的应用程序应该在以下方式工作：

• 用户点击谷歌地图形式在信息窗口
• 打开单击[下一步]另一种形式应完全在同一坐标打开 问题是在这里，我无法在打开第二个形式这个位置并获得以下错误

TypeError: g is undefined Source File: https://maps.googleapis.com/maps-api-v3/api/js/22/14/infowindow.js Line: 8

下面

是我的代码&我认为问题是在这里某处

infowindowtwo.open(map, newmarker);

<script type="text/javascript"> 
    var marker; 
    var infowindow; 
    var infowindwotwo; 

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


     var html = "<table>" + 
       "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" + 
       "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" + 
        "<tr><td>hidden:</td> <td><input type='text' value='aa' id='latlong' /></td> </tr>" + 
       "<tr><td>Type:</td> <td><select id='type'>" + 
       "<option value='bar' SELECTED>bar</option>" + 
       "<option value='restaurant'>restaurant</option>" + 
       "</select> </td></tr>" + 
       "<tr><td></td><td><input type='button' id='btnone' value='Next' onclick='phasetwo()'/></td></tr>"; 

    infowindow = new google.maps.InfoWindow({ 
    content: html 
    }); 
     google.maps.event.addListener(map, "click", function(event) { 
    //making marker here 
     marker = new google.maps.Marker({ 
      position: event.latLng, 
      map: map 
     }); 
     google.maps.event.addListener(marker, "click", function() { 
      $("#test").val(event.latLng); 
      infowindow.open(map, marker); 
     }); 
    }); 
    } 
//------------------------------------------------------------------------- 
    function phasetwo() 
    { 
     alert(123); 
     var testp = $("#test").val(); 
     alert(testp); 
     var htmltwo = "<table>" + 
       "<tr><td>Name2:</td> <td><input type='text' id='name'/> </td> </tr>" + 
       "<tr><td>Type2:</td> <td><select id='type'>" + 
       "<option value='bar' SELECTED>bar</option>" + 
       "<option value='restaurant'>restaurant</option>" + 
       "</select> </td></tr>" + 
       "<tr><td></td><td><input type='button' value='Save ' onclick='phasetwo()'/></td></tr>"; 


       infowindowtwo = new google.maps.InfoWindow({ 
       content: htmltwo 
       }); 

       var newmarker = new google.maps.Marker({ 
       position: testp, 
       map: map, 
       title: htmltwo 
      }); 
     infowindow.close(); 
      // infowindowtwo.open(map, newmarker); 
       alert(2); 
      infowindowtwo.open(map, newmarker); 
       alert(3); 
     // marker.push(newmarker); 
     } 

    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> 

谢谢。

Answer 1

我在代码InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama中收到一个javascript错误，因为map变量对于初始化函数是本地的。简单的解决办法，使全球（移动初始化函数外的声明，函数运行时初始化）：

var map; 

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

一旦被解决，我得到一个JavaScript错误：InvalidValueError: setPosition: not a LatLng or LatLngLiteral: not an Object。

你有一个问题，testp，它是字符串（如 “（37.46297753913022，-122.15921401977539）”），而不是一个LatLng或LatLngLiteral。

您可以分析进行有效的经纬度（或LatLngLiteral）：

testp = testp.replace(/[{()}]/g, ''); 
var coords = testp.split(','); 
var pt = new google.maps.LatLng(coords[0],coords[1]); 
var newmarker = new google.maps.Marker({ 
    position: pt, 
    map: map, 
    title: htmltwo 
}); 

proof of concept fiddle

代码片段：

var marker; 
 
var infowindow; 
 
var infowindowtwo; 
 
var map; 
 

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

 

 
    var html = "<table>" + 
 
     "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" + 
 
     "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" + 
 
     "<tr><td>hidden:</td> <td><input type='text' value='aa' id='latlong' /></td> </tr>" + 
 
     "<tr><td>Type:</td> <td><select id='type'>" + 
 
     "<option value='bar' SELECTED>bar</option>" + 
 
     "<option value='restaurant'>restaurant</option>" + 
 
     "</select> </td></tr>" + 
 
     "<tr><td></td><td><input type='button' id='btnone' value='Next' onclick='phasetwo()'/></td></tr>"; 
 

 
    infowindow = new google.maps.InfoWindow({ 
 
     content: html 
 
    }); 
 
    google.maps.event.addListener(map, "click", function(event) { 
 
     //making marker here 
 
     marker = new google.maps.Marker({ 
 
     position: event.latLng, 
 
     map: map 
 
     }); 
 
     google.maps.event.addListener(marker, "click", function() { 
 
     $("#test").val(event.latLng); 
 
     infowindow.open(map, marker); 
 
     }); 
 
    }); 
 
    } 
 
    //------------------------------------------------------------------------- 
 

 
function phasetwo() { 
 
    // alert(123); 
 
    var testp = $("#test").val(); 
 
    // alert(testp); 
 
    var htmltwo = "<table>" + 
 
    "<tr><td>Name2:</td> <td><input type='text' id='name'/> </td> </tr>" + 
 
    "<tr><td>Type2:</td> <td><select id='type'>" + 
 
    "<option value='bar' SELECTED>bar</option>" + 
 
    "<option value='restaurant'>restaurant</option>" + 
 
    "</select> </td></tr>" + 
 
    "<tr><td></td><td><input type='button' value='Save ' onclick='phasetwo()'/></td></tr>"; 
 

 

 
    infowindowtwo = new google.maps.InfoWindow({ 
 
    content: htmltwo 
 
    }); 
 
    testp = testp.replace(/[{()}]/g, ''); 
 
    var coords = testp.split(','); 
 
    var pt = new google.maps.LatLng(coords[0], coords[1]); 
 
    var newmarker = new google.maps.Marker({ 
 
    position: pt, 
 
    map: map, 
 
    title: htmltwo 
 
    }); 
 
    infowindow.close(); 
 
    // infowindowtwo.open(map, newmarker); 
 
    // alert(2); 
 
    infowindowtwo.open(map, newmarker); 
 
    // alert(3); 
 
    // marker.push(newmarker); 
 
} 
 

 
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() {} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input id="test" /> 
 
<div id="map"></div>