Прокладка автобусного маршрута с Google Maps

Question

Я работаю на сайте аренды недвижимости.На сайте я хотел бы иметь карту Google со всеми отмеченными свойствами и нарисованными местными автобусными маршрутами, чтобы арендаторы могли видеть близость свойств к маршруту.

Я имеюдостигнута первая часть проблемы;Я нанес на карту свойства, используя маркеры.Теперь мне нужно добавить маршрут автобуса.

Я посмотрел на это и не могу найти лучший способ его достижения.Я посмотрел на полилинии и на использование этого инструмента , но маршрут сложный и потребует сотен координат.

Существует какой-то маршрутный API, как в thispost но, видимо, это может занять только 8 путевых точек.Это правильно?

В идеале я хотел бы нарисовать карту, выбрав начальную точку, конечную точку и перетащив маршрут на место;и затем каким-то образом импортировать этот маршрут в то, что у меня есть.

Вот точный маршрут, который я хочу импортировать: http://www2.warwick.ac.uk/services/accommodation/landlords/12busroutes/.

Мой код для построения свойств:

var siteRoot = "<?php bloginfo('stylesheet_directory');?>/";

var markers = [
  <?php 
  $my_query = new WP_Query( 'post_type=properties' );
    while ($my_query->have_posts()) : $my_query->the_post();
      kdev_maps('list');
    endwhile; // end of the loop. 
    ?>
]; 

function googlemap() {

jQuery('#map_canvas').css({'height': '400px'});

// Create the map 
// No need to specify zoom and center as we fit the map further down.
var map = new google.maps.Map(document.getElementById("map_canvas"), {
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  streetViewControl: false
});

// Create the shared infowindow with two DIV placeholders
// One for a text string, the other for the StreetView panorama.
var content = document.createElement("div");
var title = document.createElement("div");
var boxText = document.createElement("div");

var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-117,-200)
        ,zIndex: null
        ,boxStyle: { 
          background: "url('"+siteRoot+"images/house-icon-flat.png') no-repeat"
          ,opacity: 1
          ,width: "240px"
          ,height: "190px"
         }
        ,closeBoxMargin: "10px 0px 2px 2px"
        ,closeBoxURL: "http://kdev.langley.com/wp-content/themes/langley/images/close.png"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
};


var infoWindow = new InfoBox(myOptions);
var MarkerImage = siteRoot+'images/house-web-marker.png';

// Create the markers
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.title,
        content: data.html,
        icon: MarkerImage
    });
    google.maps.event.addListener(marker, "click", function() {
        infoWindow.open(map, this);         
        title.innerHTML = marker.getTitle();
        infoWindow.setContent(marker.content);
        infoWindow.open(map, marker);
        jQuery(".innerinfo").parent().css({'overflow':'hidden', 'margin-right':'10px'});            
    });
}

// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
    var data = markers[index];
    bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
var origcent = new google.maps.LatLng(map.getCenter());
// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.

closeInfoWindow = function() {
    infoWindow.close();
};

google.maps.event.addListener(map, 'click', closeInfoWindow);

google.maps.event.addListener(infoWindow, 'closeclick', function()
{
    centermap();
});

function centermap()
{
    map.setCenter(map.fitBounds(bounds));
}

}

jQuery(window).resize(function() {
googlemap();
});

Любая помощь очень ценится.

Answer 1

Если вы используете бесплатные карты Google, вы можете использовать начальную точку, конечную точку и 8 путевых точек.В Google Maps Api Premiere вы можете использовать 23 точки для маршрутизации транспортных средств

Answer 2

Стоит взглянуть на две вещи:

1) Формат GTFS (https://developers.google.com/transit/gtfs/reference)) - это формат на основе csv, который позволяет кому-то пересекать время и маршруты транзита, если вам повезет, тогда данныебудет собран для вас для вашего транзитного органа:)

2) Если вы можете получить координаты, то вы можете создать линейный объект сколько угодно времени (в пределах возможностей браузера).Это делается почти так же, как вы извлекаете маркеры, за исключением того, что вы помещаете нужные объекты в ломаную линию: вот так (из документации gmaps):

var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

вы создадите свой массив из php,конечно:)

надеюсь, что это поможет.