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

我想加载一个页面上的默认位置，并改变当用户点击链接。我试图寻找一些我在网上找到的脚本，但我无法修复它。我敢肯定，我很接近得到它，但我一直在努力了一个星期=（有人能帮助我吗？=）谷歌地图加载默认和点击不同位置

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>

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/

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

来源

2017-12-27 David Aviles

我在代码中看不到任何问题，只有jquery和popper.js（bootstrap）缺失。检查这个小提琴更新：https：//jsfiddle.net/beaver71/g4jmmrks/ – beaver

哦，谢谢！在我的代码中，我有一个图像，因为我忘了从小提琴上取下这些代码没有奏效。我会检查在原始代码中进行这些更改。谢谢！ –

嗨，我确实修复它在小提琴，但不是在我的代码hahaha 我做了相同的修改，但当页面加载时，地图不显示任何位置。但是，如果我点击它的按钮，它的作品。有什么建议吗？临时链接：http://magiayte.com/delparque/contacto.php 非常感谢！ –

在您的网站，我发现initMap()函数被调用两次：从$(document).ready()

第一次，但在这里，谷歌对象尚未初始化，
，第二次是从https://maps.googleapis.com/maps/api/js?key=xyz&callback=initMap说callback调用。在第二种情况下谷歌被初始化。

尝试改变谷歌地图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"); 
};

PS：初始化（）函数必须全球访问

来源

2018-01-06 12:15:56 beaver

噢，非常感谢你！解决所有问题：D 谢谢你的时间，祝你有个愉快的一周！ –

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

回答

相关问题