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

Question

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

Navigation

#1 by (1 votes)

2

This is one of many questions or queries I have about the implementation of Google Maps on 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 displayed !!!

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

Viewing with F12 tells me that I have included many times the api of google maps ... 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

asked by MNibor 20.12.2017 в 19:27

source

1 answer

Problem in condition query SQL MYSQL Display data without repeating

score 1 · Accepted Answer

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

link

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.

I leave you a basic example of a map. link

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>