ТипError: g не определен Google Map API

Question

Я использую API карт Google. Мое приложение должно работать следующим образом:

• пользователь щелкает Google Карта форма открывается в InfoWindow
• При нажатии следующей другой вид должен открываться точно в тех же координатах Проблема здесь, я не могу открыть 2-ю форму на это место и получить следующее сообщение об ошибке

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

Я получаю ошибку javascript в вашем коде InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama, потому что переменная map является локальной для функции initialize. Простейшее исправить, сделать его глобальным (переместить декларацию за пределами функции инициализации, инициализации при запуске функции):

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); 

После того, адресованное, я получаю ошибку яваскрипта: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: not an Object.

У вас есть проблемы с testp, это строка (например, «(+37,46297753913022, -122,15921401977539)»), а не LatLng или LatLngLiteral.

Вы можете разобрать, что сделать действительный LatLng (или 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>