CODEWITHSUNDEEP
jqueryajaxgoogle-mapssymfonygoogle-maps-api-3
user4144415
user4144415

Reputation:

Load Google Maps markers via ajax

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!

Upvotes: 4

Views: 11333

Answers (1)

Michael Sivolobov
Michael Sivolobov

Reputation: 13340

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

Upvotes: 7

Related Questions