Home / Questions / 126162
Accepted
MNibor
Asked: 2020-12-21 10:27:37 +0800 CST 2020-12-21 10:27:37 +0800 CST

Why do I have to put two references to the GoogleMaps APIs?

  • 772

This is one of many questions or queries that I have about the implementation of Google Maps in a web page. The first one is that by entering the following line with my APIKEY the map IS NOT SHOWN:

<script src="https://maps.googleapis.com/maps/api/js?key=BLABLABLABLABLABLABLABLABLABLABLA&callback=initMap" async defer></script>

On the other hand, if I add this other line before, if it is shown !!!

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Seeing with F12 it tells me that I have included the google maps api many times... The code that I have armed is the following:

<head>
<meta charset="utf-8">
<title>Mapa</title>
<style>
  #map-canvas {
    height: 800px;
    width: 100%;
    box-shadow: 5px 5px 5px #888;
  }
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <!--<script src="https://maps.googleapis.com/maps/api/js?key=BLABLABLABLABLABLABLABLABLABLABLA&callback=initMap" async defer></script>-->

google-maps

1 Answers

  1. Best Answer

    @MNibor the js?sensor=false" reference is no longer needed in the latest version of Google Maps.

    https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

    SensorNotRequired   :   
El parámetro sensor ya no es obligatorio para la Google Maps 
JavaScript API. No evitará que Google Maps JavaScript API funcione en 
forma correcta, pero te recomendamos eliminar el parámetro sensor del 
elemento del script.

    Practically when you place the two scripts you are duplicating the same reference.

    Here is a basic example of a map. https://jsfiddle.net/api/post/library/pure/

    var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
    /* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
    <div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCK3ulYYM8GCwK-_HlZVNKvkgp-zvEebUM&callback=initMap"></script>

    • 1