In my Java Spring MVC web application, I am trying to load the google map with multiple locations and an option to set a location using the Places API.
I have the following code:
<div class="map-search">
<div class="input-field">
<input type="text" name="searchNear" id="searchNear" value="" class="autoplete" placeholder="Enter a location" autoplete="off">
<label for="searchNear" class="searchNear active"></label>
<button id="memberSearch" class="btn btn-defaults btn-group search-btn"><i class="fa fa-search"></i></button>
</div>
I also have the following scripts:
<script src=";libraries=places&callback=initAutoplete" async defer></script>
<script type="text/javascript" src="my-path/js/custom-scripts.js"></script>
Inside my custom-scripts.js, I have the following code:
function initAutoplete() {
$.getJSON('/smartwcm-web/get-locations', function(data)
{
const obj = data;
var locations = obj.locations.map(({info, latitude, longitude}) => [info, latitude, longitude]);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(33.0243206, -96.6745042),
mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: 'greedy'
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
});
// Create the autoplete object, restricting the search to geographical
// location types.
autoplete = new google.maps.places.Autoplete(
(document.getElementById("searchNear")),
{types: ["geocode"]});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autoplete.addListener("place_changed", fillInAddress);
}
$(document).on( 'click','a[id^="showMap-"]', function(event) {
jQuery("#pageLoading").show();
event.preventDefault();
var arr = this.id.split('-');
var count = arr[1];
var latVal = +$("#lat-"+count).val();
var lonVal = +$("#lon-"+count).val();
var titleVal = $("#info-"+count).val();
var newCenter = {lat: latVal, lng: lonVal};
// The map, centered at newCenter
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: newCenter, mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: 'greedy'});
// The marker, positioned at newCenter
var marker = new google.maps.Marker({position: newCenter, map: map, title: titleVal});
jQuery("#pageLoading").hide();
});
if((jQuery("#searchNear").val()).length == 0)
{
if(jQuery("#userLocation").length)
{
jQuery("#searchNear").val(jQuery("#userLocation").val());
var cachedLoc = jQuery("#userLocation").val();
var loc_array = "";
if(cachedLoc.indexOf(',') != -1)
{
loc_array = cachedLoc.split(',');
}
else
{
loc_array = cachedLoc.split(' ');
}
jQuery("#postal_code").val('');
if(loc_array[2] && $.isNumeric(loc_array[2]))
{
jQuery("#postal_code").val(loc_array[2].trim());
}
}
}
var placeSearch, autoplete;
var ponentForm = {
street_number: "short_name",
route: "long_name",
locality: "long_name",
administrative_area_level_1: "short_name",
country: "long_name",
postal_code: "short_name"
};
/*function initAutoplete() {
// Create the autoplete object, restricting the search to geographical
// location types.
autoplete = new google.maps.places.Autoplete(
*//** @type {!HTMLInputElement} *//*(document.getElementById("searchNear")),
{types: ["geocode"]});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autoplete.addListener("place_changed", fillInAddress);
}*/
function fillInAddress() {
// Get the place details from the autoplete object.
var place = autoplete.getPlace();
for (var ponent in ponentForm) {
document.getElementById(ponent).value = "";
document.getElementById(ponent).disabled = false;
}
// Get each ponent of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_ponents.length; i++) {
var addressType = place.address_ponents[i].types[0];
if (ponentForm[addressType]) {
var val = place.address_ponents[i][ponentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
The code works for me mostly, but occasionally I get the following error:
Uncaught (in promise) Error: Could not load "places_impl" google maps api with javascript
I am not sure why this error is occurring and not occurring always. Is there any way to prevent this?
In my Java Spring MVC web application, I am trying to load the google map with multiple locations and an option to set a location using the Places API.
I have the following code:
<div class="map-search">
<div class="input-field">
<input type="text" name="searchNear" id="searchNear" value="" class="autoplete" placeholder="Enter a location" autoplete="off">
<label for="searchNear" class="searchNear active"></label>
<button id="memberSearch" class="btn btn-defaults btn-group search-btn"><i class="fa fa-search"></i></button>
</div>
I also have the following scripts:
<script src="http://maps.google./maps/api/js?key=googleAPIKey&libraries=places&callback=initAutoplete" async defer></script>
<script type="text/javascript" src="my-path/js/custom-scripts.js"></script>
Inside my custom-scripts.js, I have the following code:
function initAutoplete() {
$.getJSON('/smartwcm-web/get-locations', function(data)
{
const obj = data;
var locations = obj.locations.map(({info, latitude, longitude}) => [info, latitude, longitude]);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(33.0243206, -96.6745042),
mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: 'greedy'
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
});
// Create the autoplete object, restricting the search to geographical
// location types.
autoplete = new google.maps.places.Autoplete(
(document.getElementById("searchNear")),
{types: ["geocode"]});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autoplete.addListener("place_changed", fillInAddress);
}
$(document).on( 'click','a[id^="showMap-"]', function(event) {
jQuery("#pageLoading").show();
event.preventDefault();
var arr = this.id.split('-');
var count = arr[1];
var latVal = +$("#lat-"+count).val();
var lonVal = +$("#lon-"+count).val();
var titleVal = $("#info-"+count).val();
var newCenter = {lat: latVal, lng: lonVal};
// The map, centered at newCenter
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: newCenter, mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: 'greedy'});
// The marker, positioned at newCenter
var marker = new google.maps.Marker({position: newCenter, map: map, title: titleVal});
jQuery("#pageLoading").hide();
});
if((jQuery("#searchNear").val()).length == 0)
{
if(jQuery("#userLocation").length)
{
jQuery("#searchNear").val(jQuery("#userLocation").val());
var cachedLoc = jQuery("#userLocation").val();
var loc_array = "";
if(cachedLoc.indexOf(',') != -1)
{
loc_array = cachedLoc.split(',');
}
else
{
loc_array = cachedLoc.split(' ');
}
jQuery("#postal_code").val('');
if(loc_array[2] && $.isNumeric(loc_array[2]))
{
jQuery("#postal_code").val(loc_array[2].trim());
}
}
}
var placeSearch, autoplete;
var ponentForm = {
street_number: "short_name",
route: "long_name",
locality: "long_name",
administrative_area_level_1: "short_name",
country: "long_name",
postal_code: "short_name"
};
/*function initAutoplete() {
// Create the autoplete object, restricting the search to geographical
// location types.
autoplete = new google.maps.places.Autoplete(
*//** @type {!HTMLInputElement} *//*(document.getElementById("searchNear")),
{types: ["geocode"]});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autoplete.addListener("place_changed", fillInAddress);
}*/
function fillInAddress() {
// Get the place details from the autoplete object.
var place = autoplete.getPlace();
for (var ponent in ponentForm) {
document.getElementById(ponent).value = "";
document.getElementById(ponent).disabled = false;
}
// Get each ponent of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_ponents.length; i++) {
var addressType = place.address_ponents[i].types[0];
if (ponentForm[addressType]) {
var val = place.address_ponents[i][ponentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
The code works for me mostly, but occasionally I get the following error:
Uncaught (in promise) Error: Could not load "places_impl" google maps api with javascript
I am not sure why this error is occurring and not occurring always. Is there any way to prevent this?
Share Improve this question edited Jul 10, 2019 at 4:42 cavpollo 4,3285 gold badges43 silver badges68 bronze badges asked Apr 22, 2019 at 10:16 Geo ThomasGeo Thomas 1,1596 gold badges29 silver badges63 bronze badges3 Answers
Reset to default 1You could run this mand below your codes.
google.maps.event.addDomListener(window, 'load', initAutoplete);
I hope this is helpful for you.
Your API javascript loads after the whole code in some cases where you get that error.
Remove that async defer from map javascript api and error should not e
make it like this:
<script src="http://maps.google./maps/api/js?key=googleAPIKey&libraries=places&callback=initAutoplete"></script>
Remove the param callback=initAutoplete and async in the final . Now call the function initAutoplete() in the final line.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745237037a4617954.html
评论列表（0条）