Google maps load default and different location on click

Question

I'm trying to load a default location on a page and change when user clicks on the link. I tried looking for some script that I found on the web but I couldn't fix it. I'm sure that I'm pretty close to get it, but I have been trying for a week =( Could someone please help me? =)

html
<div class="container-fluid" style="padding: 0;">
  <div class="col-lg-12">
    <div class="col-lg-3 sidebarMap">
      <h3>Casa Central SFV</h3>
      <p class="formInfo" style="border-bottom:0px;">Dirección:
        <a class="openmap" role="button" data-id="Casa Central">Ver en mapa</a>
      </p>
      <h3>Oficinas Belén</h3>
      <p class="formInfo" style="border-bottom:0px;">Dirección:
        <a class="openmap" role="button" data-id="Oficina Belen">Ver en mapa</a>
      </p>
    </div>

    <div class="col-lg-9" id="contactMap">
    </div>
  </div>

</div>

JS

var map;
var marker;
var uluru;

function initMap(longs, latts, markerTitle) {
  uluru = new google.maps.LatLng(longs, latts);
  // var uluru = {lat: -28.458342, lng: -65.770767};
  var map = new google.maps.Map(document.getElementById('contactMap'), {
    zoom: 17,
    center: uluru
  });
  var image = 'img/contacto/icon-map.png';
  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    icon: image,
    title: markerTitle,
    animation: google.maps.Animation.DROP,
    maxWidth: 200,
    maxHeight: 200
  });

  $('#mapModal').on('shown.bs.tab', function() {
    google.maps.event.trigger(map, "resize");
    map.setCenter(uluru);
  });
}


// Start Map Modals 
$(document).ready(function() {
  var myMapId = $(this).data('id');
  myMapId == "Casa Central";
  initMap(-28.458342, -65.770767, "Casa Central");
});

$(document).on("click", ".openmap", function() {
  var myMapId = $(this).data('id');
  if (myMapId == "Casa Central") {
    initMap(-28.458342, -65.770767, "Casa Central");
  } else if (myMapId == "Oficina Belen") {
    initMap(-27.652671, -67.028263, "Oficina Belén");
  }

});

CSS

#contactMap {
  height: 400px;
  width: 75%;
  float: right;
  z-index: 10;
}

.sidebarMap {
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 1000;
  padding: 5px 15px 5px 25px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #FFF;
}

I can't even do my fiddle works D: https://jsfiddle.net/Karsp/9z6dpk7j/

It works everything fine in my files, just doesn't load the first location on default.

Answer 1

In your site I noticed that initMap() function is called twice:

• first time from $(document).ready(), but here google object is not initialized yet,
• the second time is called from callback stated by https://maps.googleapis.com/maps/api/js?key=xyz&callback=initMap. In the second case google is initialized.

Try to change the Google Maps API reference this way:

https://maps.googleapis.com/maps/api/js?key=xyz&callback=initialize

and code from:

$(document).ready( function () {   
    var myMapId = $(this).data('id');
    myMapId == "Casa Central"; 
    initMap(-28.458342,-65.770767,"Casa Central");
});

to:

function initialize() {   
    var myMapId = $(this).data('id');
    myMapId == "Casa Central"; 
    initMap(-28.458342,-65.770767,"Casa Central");
};

P.S.: initialize() function must be globally accessible