且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在twitter引导模式下动态加载谷歌地图

更新时间:2022-10-19 15:44:53

Open modal Via data attributes

<a href="#" data-lat="23, 18.33" data-toggle="modal" data-target="#myMapModal">
   Launch Map Modal
</a>

create function initialize with parameter(parameters)

<script type='text/javascript'>
    var element = $(this);
    var map;

    function initialize(myCenter) {
        var marker = new google.maps.Marker({
            position: myCenter
        });

      var mapProp = {
            center: myCenter,
            zoom: 10,
            //draggable: false,
            //scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
        marker.setMap(map);
    };
</script>

on shown.bs.modal event call it with parameter that you get from invoker button ($(e.relatedTarget))

<script type='text/javascript'>

    $('#myMapModal').on('shown.bs.modal', function(e) {
        var element = $(e.relatedTarget);
        var data = element.data("lat").split(',')
        initialize(new google.maps.LatLng(data[0], data[1]));
    });

</script>

相关阅读

技术问答最新文章