jquery geocomplete and markerclusterer in one js api include

Question

I have following code:

<form action="suche/" method="get"> 
<input autocomplete="false" name="hidden" type="text" style="display:none;">
<input type="hidden" id="lng"  value="" name="lng">
<input type="hidden" id="lat"  value="" name="lat">
<input type="text" id="city" name="city" autocomplete="off" class="form-control header  city" placeholder="Wo suchst du?" required>
<button class="btn btn-primary btn-block header" type="submit">Suchen</button>
</form>

<div id="map" style="width:100%;height:400px"></div>

<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: {
  lat: 52.545157,
  lng: 11.083294900000055
 }
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
  position: location
});
google.maps.event.addListener(marker, 'click', function(evt) {
  infoWin.setContent(location.info);
  infoWin.open(map, marker);
})
return marker;
});

var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [{
lat: 52.5504,
lng: 11.08523,
info: 'xxx'
}];

google.maps.event.addDomListener(window, 'load', initMap);
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=[MYKEY]&amp;libraries=places"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[MYKEY]&amp;&callback=initMap"></script> 
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<script src="jquery.geocomplete.js"></script>
<script>
    $(".city").geocomplete({
      details: "form",
      //types: ["geocode"],
      language: 'de-DE',
    types: ['geocode'],
      componentRestrictions: {country: "de"}
    });

    $("#find").click(function(){
      $(".city").trigger("geocode");
    });   

</script>

THE PROBLEM: Console Output: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors

Anybody an idea how to include only one js library from google maps api?

I use autocomplete for my form (geocoding-data (lng,lat)) In other div I use Markerclusterer, which doesn't work with autocomplete (this is right so).

Answer 1

You should be able to use either option (with async defer and a callback or without). The simplest solution is to remove async defer and the callback, but that means the page takes longer to load.

To do that:

• load the API as described in the documentation:

<script src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&libraries=places"></script>

You don't need the &callback=initMap or the async defer, the line: google.maps.event.addDomListener(window, 'load', initMap); initializes the map.

proof of concept fiddle

code snippet:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places"></script>

<form action="suche/" method="get">
  <input autocomplete="false" name="hidden" type="text" style="display:none;">
  <input type="hidden" id="lng" value="" name="lng">
  <input type="hidden" id="lat" value="" name="lat">
  <input type="text" id="city" name="city" autocomplete="off" class="form-control header  city" placeholder="Wo suchst du?" required>
  <button class="btn btn-primary btn-block header" type="submit">Suchen</button>
</form>

<div id="map" style="width:100%;height:400px"></div>

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {
        lat: 52.545157,
        lng: 11.083294900000055
      }
    });
    var infoWin = new google.maps.InfoWindow();
    var markers = locations.map(function(location, i) {
      var marker = new google.maps.Marker({
        position: location
      });
      google.maps.event.addListener(marker, 'click', function(evt) {
        infoWin.setContent(location.info);
        infoWin.open(map, marker);
      })
      return marker;
    });

    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
  }
  var locations = [{
    lat: 52.5504,
    lng: 11.08523,
    info: 'xxx'
  }];

  google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>
<script>
  $(".city").geocomplete({
    details: "form",
    //types: ["geocode"],
    language: 'de-DE',
    types: ['geocode'],
    componentRestrictions: {
      country: "de"
    }
  });

  $("#find").click(function() {
    $(".city").trigger("geocode");
  });
</script>