谷歌地图在点击时加载默认和不同的位置

Question

我正在尝试在页面上加载默认位置，并在用户单击链接时进行更改。我试图寻找一些我在网上找到的脚本，但我无法修复它。 我确信我已经很接近了，但我已经尝试了一个星期 =( 有人可以帮我吗？ =)

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;
}

我什至不能做我的小提琴作品 D： https://jsfiddle.net/Karsp/9z6dpk7j/

它在我的文件中一切正常，只是默认不加载第一个位置。

Answer 1

在您的网站中，我注意到initMap() 函数被调用了两次：

• 第一次来自$(document).ready()，但是这里的google对象还没有初始化，
• 第二次从callback 调用，由https://maps.googleapis.com/maps/api/js?key=xyz&callback=initMap 声明。在第二种情况下，google 被初始化。

尝试以这种方式更改 Google Maps API 参考：

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

和代码来自：

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

到：

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

P.S.：initialize() 函数必须是全局可访问的