I developed a Web application in which i integrate Goole Maps in my application, user can search, place markers, view locations etc etc with google map,
Here is my code
JS:
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 31.601043, lng: 74.169527},
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
loadMarkersDynamically(); // this function for loading markers in map
map2 = new google.maps.Map(document.getElementById('map2'), {
/* center: {lat: 31.615114, lng: 74.150065}, */
center: {lat: 31.601043, lng: 74.169527},
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input2 = document.getElementById('pac-input2');
var searchBox2 = new google.maps.places.SearchBox(input2);
map2.controls[google.maps.ControlPosition.TOP_LEFT].push(input2);
// Bias the SearchBox results towards current map's viewport.
map2.addListener('bounds_changed', function() {
searchBox2.setBounds(map2.getBounds());
});
var markers2 = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox2.addListener('places_changed', function() {
var places2 = searchBox2.getPlaces();
if (places2.length == 0) {
return;
}
// Clear out the old markers.
markers2.forEach(function(marker2) {
marker2.setMap(null);
});
markers2 = [];
// For each place, get the icon, name and location.
var bounds2 = new google.maps.LatLngBounds();
places2.forEach(function(place) {
var icon2 = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers2.push(new google.maps.Marker({
map: map2,
icon: icon2,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds2.union(place.geometry.viewport);
} else {
bounds2.extend(place.geometry.location);
}
});
map2.fitBounds(bounds2);
});
}
I initialize my Map with this way
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwEvCr3alGTKBFt23yk4WVq5jg34I7CJs&libraries=places&callback=initMap"
async defer></script>
Now i have key and then i call initMap function, everything is working perfectly perfectly Map its features etc, But when there is no internet connection the map is not initialize and error come and neither map is displayed and also not work its feature, My question is,
- is it possible to integrate googlemap without internet ?
- when i install application to client than what if he has no internet ?
- if there is any way to integrate map without internet kindly tell me ?
thanks
Regards