谷歌地图在ajax上成功

Question

I have the following Ajax request on a select drop down change which simply gets the records from the controller, Loop through each one and get the latitude | longitude and pushes it to an array.

Then in the same ajax success i pass that lat and lng array to google map.

But the map doesn't shows up..

$(document).ready(function() {
   $('.selectCity').change(function() {
    var city = $(this).val();
    $.ajax({
      type: 'GET',
      url: '/riders/location/track',
      data: {
        'city': city
      },
      success: function(data) {
        var lat = [];
        var lng = [];

        //Get Locations and push it to lat and lng
        $.each(data, function(index, value) {
          $.each(value, function(index1, value1) {
            console.log(value1.rider_location.lat);
            lat.push(value1.rider_location.lat);
            lng.push(value1.rider_location.lng);
          });
        });

        //Google Map
        google.maps.event.addDomListener(window, 'load', init);

        function init() {

          var locations = [
            ['Rider', lat, lng]
          ];

          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(lat, lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          var infowindow = new google.maps.InfoWindow();
          var marker, i;
          for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
              position: new google.maps.LatLng(locations[i][1], locations[i][2]),
              map: map
            });
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
              return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
              }
            })(marker, i));
          }
        }
      }
    });
  });
});

Plus please suggest best practice also.

Answer 1

Of course I can make my comment above as an answer.

You can also listen to the "google-maps-ready"-event in the script-url by using the callback-parameter (HTML):

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?libraries=geometry,places&callback=initialize">
</script>

JS:

// In this way you have to define a function called initialize which should be defined globally otherwise it can not be found by the google-library.

// unfortunately this map-variable is defined globally here but you can also wrap the whole code below by using an IIFE.
var map; 
function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    // you might set a center here or wait untill you have got some markers fetched via ajax, you can then use the first/last or some other marker respecetive it's position(lat,long) to set as "starting point"
    //center: {lat: LAT, lng: LONG }
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
}

// Although I have no access to your website to test this code below, it might be done in this way:
$(document).ready(function () {
  $('.selectCity').change(function () {
    var city = $(this).val();
    $.ajax({
      type: 'GET',
      url: '/riders/location/track',
      data: {
        'city': city
      },
      success: function (data) {
        var positions = [];
        //Get Locations and push it to lat and lng
        // you can also use just one array to insert all locations and "labels" into
        $.each(data, function (index, value) {
          $.each(value, function (index1, value1) {
            console.log(value1.rider_location.lat);
            positions.push({
              lat: value1.rider_location.lat,
              lng: value1.rider_location.lng,
              content: 'Rider' // do you get some text with each location?
            });
          });
        });
        // set "starting point" afterwards
        map.setCenter({
          lat: positions[0].lat,
          lng: positions[0].lng
        });
        var infowindow = new google.maps.InfoWindow();
        var marker,
        i;
        for (i = 0; i < positions.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(positions[i].lat, positions[i].lng),
            map: map
          });
          google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
              infowindow.setContent(positions[i].content);
              infowindow.open(map, marker);
            }
          }) (marker, i));
        }
      }
    });
  });
});

Hope it helps!