时间戳

首页 > 解决方案 > 使用 Google Maps 的 API 创建地图时出现问题

javascript - 使用 Google Maps 的 API 创建地图时出现问题

问题描述

我必须创建一个使用 Google Maps API 返回客户端位置的地图，它用于分配。

代码工作正常，它找到经度和纬度并将其打印在屏幕上，但是当需要创建地图时会向我抛出此错误：消息：“地图：预期元素类型的 mapDiv 但被传递为空。名称：InvalidValueError”

有谁知道为什么会出现，因为我确实指定了 mapDiv map = new google.maps.Map(document.getElementById("map"), {center: {lat: latitud, lng: longitud}, zoom: 14});...

var longitud;
var latitud;

var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
};
  
function success(pos) {
    var crd = pos.coords;
    latitud = crd.latitude
    longitud = crd.longitude   
    document.getElementById("latitud").innerHTML = latitud 
    document.getElementById("longitud").innerHTML = longitud 
};
  
function error(err) {
    document.getElementById("map").innerHTML = ('ERROR(' + err.code + '): ' + err.message);
};
  
navigator.geolocation.getCurrentPosition(success, error);

function initMap(){
    map = new google.maps.Map(document.getElementById("map"), {
        center: {lat: latitud, lng: longitud},
        zoom: 14
    });
}
.map{
    margin: 0 auto;
    width: 300px;
    height: 300px;
}
<head>
        <meta charset="utf-8">
        <script type="text/javascript" src="funciones.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0dtNMb8xZh0aMLX4P-KiNccovF1w2tpM&callback=initMap"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Tcuida</title>
</head>
    
<div class="paginaPrinc" id="paginaPrinc">
    <div id="latitud"></div>
    <div id="longitud"></div>
    <div id="map" class="map"></div>
</div>

标签： javascripthtmlgoogle-mapsmaps

解决方案

当document.getElementById("map")返回null或类型不是div.

map = new google.maps.Map(element, options)

函数中的第一个参数需要div类型的元素

推荐阅读