0

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

Ahmad
  • 1,462
  • 5
  • 17
  • 40
  • i don't think it is duplicate of this question, because no help is provided related to what i ask.. – Ahmad May 26 '16 at 09:38
  • 3
    It's exactly what you asked for Ahmad, but the primary answer points out it might be a violation of service terms to do so. If you are in a professional environment, you may consider to use publicly available map data. like openstreetmap.org, with this service you are allowed to cache data as much as you want to – prizm1 May 26 '16 at 09:56
  • 1
    [10.1 - a. No access to APIs or Content except through the Service. You will not access the Maps API(s) or the Content except through the Service. For example, you must not access map tiles or imagery through interfaces or channels (including undocumented Google interfaces) other than the Maps API(s).](https://developers.google.com/maps/terms#10-license-restrictions) – MrUpsidown May 26 '16 at 11:56

0 Answers0