通过ajax加载Google地图标记

时间:2015-06-08 08:38:16

标签: jquery ajax google-maps symfony google-maps-api-3

我想通过ajax使用自己的地理位置服务加载Google地图的标记。 ajax功能来自jQuery。我加载标记的代码如下:

 $(document).ready(function() {

        var myLatlng = new google.maps.LatLng(49.47143, 11.107489999999984);
        var mapOptions = {
            zoom: 8,
            center: myLatlng
        };
        var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions);

        $.ajax({
            type: "GET",
            url: "{{ path('jobs_ajax_get_geolocation') }}",
            data: "addr="+encodeURI("{{ company.getAddress }}, {{ company.getZipCode }} {{ company.getCity }}"),
            success: function(data) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data.lat, data.long),
                    map: map,
                    title: 'test'
                });
            }
        });
    });

地图加载了正确的初始化位置,但未显示任何标记。 url({{path('jobs_ajax_get_geolocation')}}提供了ajax结果;它是一个symfony-route)。

我的错误在哪里?谢谢!

1 个答案:

答案 0 :(得分:4)

您的问题范围错误。

您在函数定义中声明了var marker。在功能之外它不存在。但是你需要在外部范围内。

尝试在关闭之前声明它:

$(document).ready(function() {

        var myLatlng = new google.maps.LatLng(49.47143, 11.107489999999984);
        var mapOptions = {
            zoom: 8,
            center: myLatlng
        };
        var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions);
        var marker;

        $.ajax({
            type: "GET",
            url: "{{ path('jobs_ajax_get_geolocation') }}",
            data: "addr="+encodeURI("{{ company.getAddress }}, {{ company.getZipCode }} {{ company.getCity }}"),
            success: function(data) {
                    marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data.lat, data.long),
                    map: map,
                    title: 'test'
                });
            }
        });
    });