Load Google Maps markers via ajax

Question

I want to load the markers for a Google Map via ajax with my own geolocation service. The ajax functionality comes from jQuery. My code to load the markers is the following:

 $(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'
                });
            }
        });
    });

The map loads with the correct initialize-location, but no marker is shown. There are ajax results provided by the url ({{ path('jobs_ajax_get_geolocation') }}; it's a symfony-route).

Where is my mistake? Thanks!

Solution

Your problem is in the wrong scope.

You declared var marker inside function definition. Outside of the function it will not exist. But you need it in the outer scope.

Try declare it before closure:

$(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'
                });
            }
        });
    });