Проложить маршрут на Картах Google, используя координаты из базы данных

Question

Ниже приведена карта, демонстрирующая тип вывода, который я хотел бы достичь.

Однако, когда я получать координаты из базы данных я не знаю, как рисовать их на Google Maps для того, чтобы получить этот тип продукции. Я использую этот код, но не могу поместить координаты в этот код из базы данных.

var MapPoints = '[{"address":{"address":"plac Grzybowski, Warszawa, Polska","lat":"52.2360592","lng":"21.002903599999968"},"title":"Warszawa"},{"address":{"address":"Jana Paw\u0142a II, Warszawa, Polska","lat":"52.2179967","lng":"21.222655600000053"},"title":"Wroc\u0142aw"},{"address":{"address":"Wawelska, Warszawa, Polska","lat":"52.2166692","lng":"20.993677599999955"},"title":"O\u015bwi\u0119cim"}]'; 


var MY_MAPTYPE_ID = 'custom_style'; 

function initialize() { 

    if (jQuery('#map').length > 0) { 

    var locations = jQuery.parseJSON(MapPoints); 

    window.map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     scrollwheel: false 
    }); 

    var infowindow = new google.maps.InfoWindow(); 
    var flightPlanCoordinates = []; 
    var bounds = new google.maps.LatLngBounds(); 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng), 
     map: map 
     }); 
     flightPlanCoordinates.push(marker.getPosition()); 
     bounds.extend(marker.position); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i]['title']); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 

    map.fitBounds(bounds); 

    var flightPath = new google.maps.Polyline({ 
     map: map, 
     path: flightPlanCoordinates, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    } 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

Вы добавляете маркеры на карту, чтобы вы могли извлечь их координаты для создания полилинии. Вы можете вырезать посредника и использовать LatLng s для создания полилинии.

$('document').ready(function() { 
    initialize(); 
}); 
// You don't need google.maps.event.addDomListener(window, 'load', initialize); 
// if you use jQuery's $(document).ready() function. 

function initialize() { 

    var flightPathCoordinates = []; 

    // Get the data from the server. 
     $.get(
     "url/of/serverScript.php", // Wherever you're getting your var MapPoints JSON. 
     function(response) { 
      var locations = $.parseJSON(response); 
      var coordinatePair; 

      for (i = 0; i < locations.length; i++) { 
       coordinatePair = new google.maps.LatLng(locations[i].address.lat, 
               locations[i].address.lng); 
       flightPathCoordinates.push(coordinatePair); 
      } 
     }); // end $.get() 

    // Create the map. 
    map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     scrollwheel: false 
    }); 

    // Create the polyline. 
    var flightPath = new google.maps.Polyline({ 
     map: map, 
     path: flightPlanCoordinates, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    // Add it to the map. 
    flightPath.setMap(map); 
} 

Примечание: Вы можете использовать $ вместо jQuery. например они эквивалентны: jQuery('#map')$('#map')