Jquery Mobile not loading multiple instance of google maps

Question

I am workin in a cordova project with jquery mobile and I need multiple maps. The problem is that when a map loads, the other one dosn't and I know thats because I trigger the API when I need it but I can't make it work for multiple maps.

var app = {
  initialize: function() {
    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
  },
  onDeviceReady: function() {
    this.receivedEvent('deviceready');
  },
  receivedEvent: function(id) {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');
    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');
    console.log('Received Event: ' + id);
  }
};
document.addEventListener("backbutton", function(e){
  if($.mobile.activePage.is('#homepage')){
    navigator.app.exitApp();
  }
  else {
    navigator.app.backHistory()
  }
}, false);
app.initialize();
init = function() {
 var viafin = {lat: -38.0183981, lng: -57.5428156};
 var brut = {lat: -26.976732, lng: -48.638033};
 /*
 var sivara = {lat:, lng:};
 var hmplaza = {lat:, lng:};
 var hamburgo = {lat:, lng:};
 */
 var image = 'img/map_marker.png';

 var map2 = new google.maps.Map(document.getElementById('map_brut'), {
   zoom: 14,
   center: brut,
   disableDefaultUI: true
 });
 var map = new google.maps.Map(document.getElementById('map_viafin'), {
   zoom: 14,
   center: viafin,
   disableDefaultUI: true
 });
 var marker2 = new google.maps.Marker({
   position: brut,
   map: map2,
   icon: image
 });
 var marker = new google.maps.Marker({
   position: viafin,
   map: map,
   icon: image
 });

}
function callmap() {
  if (typeof google === 'object' && typeof google.maps === 'object') {} else {
    var script = document.createElement("script");
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
    script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCKxYBGN7mcxj81NbByKBCvsEWJhIYOmEU&callback=init";
    }
}
$(document).on('pageshow', '#nosotros',function(event){callmap()});

$(document).on('pageshow', '#hotel1',function(event){callmap()});
$(document).on('pageshow', '#hotel2',function(event){callmap()});
$(document).on('pageshow', '#hotel3',function(event){callmap()});
$(document).on('pageshow', '#hotel4',function(event){callmap()});

$(document).ready(function(){
  var video = document.getElementById('video');
  var source = document.createElement('source');
  source.setAttribute('src', 'http://hoffmannestudio.com/viafin/etd.mp4');
  $("#vtitulo").html("Elegi tu destino");
  video.appendChild(source);
  $("#video1").click(function(){
    video.pause();
    $("#vtitulo").html("Elegi tu destino");
    $("#video").attr("poster", "img/fiestas.jpg");
    source.setAttribute('src', 'http://hoffmannestudio.com/viafin/etd.mp4');
    video.load();
  });
  $("#video2").click(function(){
    video.pause();
    $("#vtitulo").html("Eclipse Savana");
    $("#video").attr("poster", "img/camboriu.jpg");
    source.setAttribute('src', 'http://hoffmannestudio.com/viafin/es.mp4');
    video.load();
  });
});

Answer 1

You didn't post your CSS, but i assume you know already (from Google Maps documentation):

/* Always set the map height explicitly to define the size of the div element that contains the map. */

Beside this, the question is about which JQM event shall be used to show the map. I would suggest the pageshow event because, at this point, the map container is visible with the desired size. Then, simply keep track of which maps have been already initialized, to avoid to download the script multiple times, and also to avoid to create the maps multiple times.

There will be many possibilities, to achieve what you want, my proposal is as follows:

Sample with two pages:

  <div data-role="page" id="page-viafin">
    <div role="main" class="ui-content">
      <div id="map_viafin" class="map"></div>
    </div>
  </div>
  <div data-role="page" id="page-brut">
    <div role="main" class="ui-content">
      <div id="map_brut" class="map"></div>
    </div>
  </div>

CSS for the map container (change the size as you like):

.map {
  width: 300px;
  height: 300px;
}

JavaScript:

/* Separate initialization for each map */
function init_viafin() {
 var viafin = {lat: -38.0183981, lng: -57.5428156};
 var map = new google.maps.Map(document.getElementById('map_viafin'), { zoom: 14, center: viafin });
 var marker = new google.maps.Marker({ position: viafin, map: map });
}
function init_brut() {
 var brut = {lat: -26.976732, lng: -48.638033};
 var map = new google.maps.Map(document.getElementById('map_brut'), { zoom: 14, center: brut });
 var marker = new google.maps.Marker({ position: brut, map: map });
}
/* Download & initialize map, or just only initialize map */
function callmap(map) {
  if (typeof google === 'object' && typeof google.maps === 'object') {
    map();
  } else {
    var script = document.createElement("script");
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
    script.src = "https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY]&callback="+map.name;
  }
}
/* Keep track of which maps have been already initialized */
var cases = { "page-viafin": init_viafin, "page-brut": init_brut};
/* Use pageshow, as you already did in your post */
$(document).on("pageshow", function(e) {
    var pageId = e.target.id;
    if(cases[pageId]) {
      callmap(cases[pageId]);
      cases[pageId] = null;
    }
});