通过Ajax调用加载Google地图

时间:2016-09-08 04:33:22

标签: javascript html5 google-maps google-maps-api-3

我看到了一些与我有关的问题,但它们都不适合我。 我有单页,并在ajax调用我正在替换某些div的内容,以创建没有标准页面加载的vieawing页面的效果。

索引文件中的

我有一些div:

<div id="dynamic"></div>

所有其他页面html看起来像:

<div id="dynamic" class="content">
<!-- custom content, will be loaded in index file via ajax, etc -->
</div>

而且,现在是一段JS代码:

$('.menu a').on('click',function(e) {
        e.preventDefault();
        var url = $(this).attr('href');

        $.ajax({
            url: url,
            dataType: 'html',
            success: function(html) {
                var div = $(html);
                var delay = 100;
                setTimeout(function() {
                    $('#dynamic').html('').append(div.filter('.content').html());
                }, delay);
            }
        });
    })

这是谷歌地图在标准页面加载时正常工作的联系页面(当我输入联系人页面网址并点击回车时),但是当我点击.menu a时,地图不适用于动态ajax调用/ p>

<div id="dynamic" class="content">
    <div id="map1"></div>
    <script>
        function init_map() {
            var styles = [
            ];

            var myOptions = {
                mapTypeControlOptions: {
                    mapTypeIds: ['Styled']
                },
                center: new google.maps.LatLng(46.4325, 44.5676723),
                mapTypeId: 'Styled',

            };

            var div = document.getElementById('map1');
            var map = new google.maps.Map(div, myOptions);
            var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
            map.mapTypes.set('Styled', styledMapType);

            marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(51.4981374, -0.1520723),
                icon: "images/marker.png"
            });
        }

        if (document.getElementById("map1")) {
            google.maps.event.addDomListener(window, 'load', init_map);
        }
    </script>
</div>

我试图在ajax代码中运行init_map函数,但这没有做任何事情。 谢谢你的任何建议。

1 个答案:

答案 0 :(得分:0)

主要的想法是,您必须处理google.maps对象(脚本,样式,字体)才能使其正常工作并避免内存泄漏。

您可以查看我的脚本here。当您点击&#34;加载地图&#34;时,map.html中定义的Google地图会显示。