谷歌地图标记Javascript_Javascript_Google Maps

谷歌地图标记Javascript

javascript google-maps

谷歌地图标记Javascript,javascript,google-maps,Javascript,Google Maps,我一直在努力使用谷歌地图API 我想要的是在地图加载后添加新标记我可以添加标记，但信息窗口不起作用 <html> <heads> <style> html, body, #map { height: 100%; margin: 0px; padding: 0px } #infowindow{ padding: 10px; } </style> <script> var map; var myLatLng = {la

我一直在努力使用谷歌地图API

我想要的是在地图加载后添加新标记

我可以添加标记，但信息窗口不起作用

<html>
<heads>
<style>
html, body, #map {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#infowindow{
  padding: 10px;
}
</style>
<script>

var map;
var myLatLng = {lat: 51.197263, lng: 4.399279};
var myZoom = 8;
var geocoder;
var infowindow = new google.maps.InfoWindow();
function initMap() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            myLatLng = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            myZoom = 15;
            createmap(myLatLng);
            addMeToMap("F0FF00", "Uw locatie", myLatLng);
        }, function (error) {
            if (document.getElementById("GeoLat").value != "" && document.getElementById("GeoLng").value != "") {
                myLatLng = {
                    lat: parseFloat(document.getElementById("GeoLat").value),
                    lng: parseFloat(document.getElementById("GeoLng").value)
                };
                myZoom = 15;
            };
            createmap(myLatLng);
            }
        );
    } else {
        createmap(myLatLng);
    };
};

function createmap(pos) {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: myZoom,
        center: pos
    });
    addToMap("00FF00", "Test", "1", "", "51.243158", "3.520092");
    addToMap("00FF00", "Test", "2", "", "51.344158", "3.620192");
    addToMap("00FF00", "Test", "3", "", "51.145158", "3.720292");
    addToMap("00FF00", "Test", "4", "", "51.546158", "3.420392");
    addToMap("00FF00", "Test", "5", "", "51.447158", "3.320492");
    addToMap("00FF00", "Test", "6", "", "51.748158", "3.220592");
    addToMap("00FF00", "Test", "7", "", "51.649158", "3.120692");
    addToMap("00FF00", "Test", "8", "", "51.950158", "3.020792");
    addToMap("00FF00", "Test", "9", "", "51.271158", "3.110892");
    addToMap("00FF00", "Test", "10", "", "51.282158", "3.220992");
    addToMap("00FF00", "Test", "11", "", "51.213158", "3.331092");
    addToMap("00FF00", "Test", "12", "", "51.244158", "3.441192");
    addToMap("00FF00", "Test", "13", "", "51.235158", "3.551292");
    addToMap("00FF00", "Test", "14", "", "51.336158", "3.661392");
    addToMap("00FF00", "Test", "15", "", "52.243158", "4.520092");
    addToMap("00FF00", "Test", "16", "", "52.344158", "4.620192");
    addToMap("00FF00", "Test", "17", "", "52.145158", "4.720292");
    addToMap("00FF00", "Test", "18", "", "52.546158", "2.420392");
    addToMap("00FF00", "Test", "19", "", "52.447158", "2.320492");
    addToMap("00FF00", "Test", "20", "", "52.748158", "2.220592");
    addToMap("00FF00", "Test", "21", "", "52.649158", "5.120692");
    addToMap("00FF00", "Test", "22", "", "52.950158", "5.020792");
    addToMap("00FF00", "Test", "23", "", "52.271158", "5.110892");
    addToMap("00FF00", "Test", "24", "", "52.282158", "7.220992");
    addToMap("00FF00", "Test", "25", "", "52.213158", "7.331092");
    addToMap("00FF00", "Test", "26", "", "52.244158", "7.441192");
    addToMap("00FF00", "Test", "27", "", "52.235158", "1.551292");
    addToMap("00FF00", "Test", "28", "", "52.336158", "1.661392");
};

function addToMap(Color, Title, Description, InfoPage, Lat, Lng) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: {
            lat: parseFloat(Lat),
            lng: parseFloat(Lng)
        },
        map: map,
        icon: pinImage,
        title: Title
    });

    google.maps.event.addListener(marker, 'click', function () {
        //infowindow.close(); // Close previously opened infowindow
        infowindow.setContent("<div style='padding: 10px' id='infowindow'>" + Title + "</div>");
        infowindow.open(map, marker);
    });

};

function addMeToMap(Color, Title, Pos) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: Pos,
        map: map,
        icon: pinImage,
        title: Title
    });
};

</script>

</head>

<body>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>

</body>

</html>

这实际上是在添加管脚，但单击功能不起作用

小旁注：如果我在initMap部分调用所有这些，它可以工作，但这不是我的解决方案，因为我想在加载地图后添加标记。

google.maps.InfoWindow在页面加载时不加载，您可以在设置google maps API后设置并在回调函数中定义它，或者使用$.ready

编辑：

我收到一个javascript错误，发布代码为：uncaughtreferenceerror:google未定义在这一行：

var infowindow = new google.maps.InfoWindow();

由于异步加载Google Maps Javascript API v3，因此对API对象的所有引用必须位于回调函数initMap内，或者在加载并运行API后使用

将infowindow变量的初始化移到initMap函数中：

var infowindow;
function initMap() {
    infowindow = new google.maps.InfoWindow();
    // ... rest of initMap function

代码段：

var映射； var mylatng={ 拉脱维亚：51.197263，液化天然气：4.399279 }; var-myZoom=8； var地理编码器； var信息窗口；函数初始化映射{ infowindow=新建google.maps.infowindow； if navigator.geolocation{ navigator.geolocation.getCurrentPositionfunctionposition{ myLatLng={ 纬度：位置坐标纬度， lng:position.coords.longitude }; myZoom=15； createmapmyLatLng；地址：myLatLng Uw locatie，METOMAPF0FF00； }，函数错误{ 如果document.getElementByIdGeoLat.value！=&document.getelementbyidgeoling.value！={ myLatLng={ lat:parseFloatdocument.getElementByIdGeoLat.value， lng:parseFloatdocument.getelementbyidgeoling.value }; myZoom=15； }; createmapmyLatLng； }; }否则{ createmapmyLatLng； }; }; 函数createmappos{ map=new google.maps.Mapdocument.getElementById'map'{ zoom:myZoom，中心：pos }; addToMap00FF00，测试，1，51.243158，3.520092； addToMap00FF00，测试，2，51.344158，3.620192；添加到P00FF00，测试，3，51.145158，3.720292； addToMap00FF00，测试，4，51.546158，3.420392；添加到P00FF00，测试，5，51.447158，3.320492； addToMap00FF00，测试，6，51.748158，3.220592； addToMap00FF00，测试，7，51.649158，3.120692； addToMap00FF00，测试，8，51.950158，3.020792； addToMap00FF00，测试，9，51.271158，3.110892； addToMap00FF00，测试，10，51.282158，3.220992； addToMap00FF00，测试，11，51.213158，3.331092； addToMap00FF00，测试，12，51.244158，3.441192； addToMap00FF00，测试，13，51.235158，3.551292； addToMap00FF00，测试，14，51.336158，3.661392； addToMap00FF00，测试，15，52.243158，4.520092； addToMap00FF00，测试，16,52.344158,4.620192；添加到P00FF00，测试，17，52.145158，4.720292； addToMap00FF00，测试，18，52.546158，2.420392； addToMap00FF00，测试，19，52.447158，2.320492； addToMap00FF00，测试，20，52.748158，2.220592； addToMap00FF00，测试，21，52.649158，5.120692； addToMap00FF00，测试，22,52.950158,5.020792； addToMap00FF00，测试，23，52.271158，5.110892； addToMap00FF00，测试，24，52.282158，7.220992； addToMap00FF00，测试，25，52.213158，7.331092； addToMap00FF00，测试，26，52.244158，7.441192； addToMap00FF00，测试，27，52.235158，1.551292； addToMap00FF00，测试，28，52.336158，1.661392； map.fitbundsbounds； }; var界；功能添加到主颜色、标题、说明、信息页、Lat、Lng{ var pinColor=颜色； var pinImage=new google.maps.MarkerImagehttp://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|+pinColor，新的google.maps.Size21,34，新的google.maps.Point0，0，新的google.maps.Point10,34； var marker=new google.maps.marker{ 职位：{ lat:parseFloatLat，液化天然气：液化天然气 }, 地图：地图，图标：pinImage，标题：标题 }; 如果！bounds=new google.maps.LatLngBounds； bounds.extendmarker.getPosition； google.maps.event.addListenermarker“单击”功能{ //infowindow.close；//关闭以前打开的infowindow infowindow.setContent+Title+； infowindow.openmap，标记； }; }; 功能添加颜色、标题、位置{ var pinColor=颜色； var pinImage=new google.maps.MarkerImagehttp://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|+pinColor，新的google.maps.Size21,34，新的google.maps.Point0，0，新的google.maps.Point10,34； var marker=new google.maps.marker{ 职位:Pos,，地图：地图，图标：pinImage，标题：标题 }; }; html，身体地图{ 身高：95%；边际：0px；填充：0px； } 信息窗口{ 填充：10px； }

var infowindow;
function initMap() {
    infowindow = new google.maps.InfoWindow();
    // ... rest of initMap function