Problem when creating a map using Google Maps' API and geolocation

user_13862331 0
Viewed 26927

I have to create a map that returns the location of a client using Google Maps API, it's for an assignment.

The code works fine, it locates the longitude and latitude and prints it on screen, pbut when it's time to create the map throws me this error: message: "Map: Expected mapDiv of type Element but was passed null. name: InvalidValueError"

Does anyone know why that appears since I did specify 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>

maps google-maps html javascript
3 Answers

This occurs when document.getElementById("map") returns null or type other than div.

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

The 1st parameter in the function expects element of div type

user_151183830

I get a different error with the posted code: InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number, because the geolocation service is asynchronous, and the map is created before it returns a result.

You have a race condition between two asynchronous operations:

  1. the load of the Google Maps Javascript API v3, which calls initMap
  2. the return of the results of the geolocation service, which calls success

Best would be to remove the race condition, either have the geolocation function call initMap or have the initMap function make the geolocation request.

Example of the second option:

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

working example

proof of concept fiddle

code snippet:

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>

user_12103290

You need to add a div with id "map". Else document.getElementById("map") will return null so you will get that error.

    <div id="map" style="width: auto; height: 550px; position: relative; overflow: hidden;"></div>
user_67782700
Related