BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Google MapsのAPIを使用して地図を作成する際の問題点

2022-02-10 11:20:59

質問

Google Maps APIを使用して、クライアントの位置を返す地図を作成する必要があります。

コードは正常に動作し、経度と緯度を検索して画面に表示しますが、マップを作成するときにこのエラーが発生します。 message: "地図。ElementタイプのmapDivを期待していましたが、nullが渡されました。

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>

解決方法は？

投稿されたコードで別のエラーが発生します。 InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number なぜなら、ジオロケーションサービスは非同期であり、結果を返す前にマップが作成されるからです。

2つの非同期操作の間にレースコンディションが発生しています。

  1. Google Maps Javascript API v3 のロード。 initMap
  2. ジオロケーションサービスの結果の返送、これは success

レースコンディションを削除し、ジオロケーション関数を呼び出すようにするのがベストでしょう。 initMap または initMap 関数がジオロケーションのリクエストを行います。

2番目のオプションの例。 

function initMap(){
    navigator.geolocation.getCurrentPosition(success, error);
}

function success(pos) {
    var crd = pos.coords;
    latitud = crd.latitude
    longitud = crd.longitude   
    document.getElementById("latitud").innerHTML = latitud 
    document.getElementById("longitud").innerHTML = longitud 
    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
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: latitud,
      lng: longitud
    },
    zoom: 14
  });
};

function error(err) {
  document.getElementById("map").innerHTML = ('ERROR(' + err.code + '): ' + err.message);
};

function initMap() {
  navigator.geolocation.getCurrentPosition(success, error);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

.map,
.paginaPrinc {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div class="paginaPrinc" id="paginaPrinc">
  <div id="latitud"></div>
  <div id="longitud"></div>
  <div id="map" class="map"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します