title: Plotting bus route with Google Maps
body: <p>I'm working on a property rental site. On the site I'd like to have a Google map, with all of the properties marked, and the local bus routes drawn, so that renters can see the proximity of the properties to the route.</p>
  
  <p>I've achieved the first part of the problem; I've plotted the properties using markers. Now I need to add the bus route.</p>
  
  <p>I've looked in to this and I can't quite work out the best way to achieve it. I looked at polylines and at using <a href="http://code.google.com/apis/maps/documentation/utilities/polylineutility.html" rel="nofollow noreferrer">this tool</a>, but the route is complex and would take hundreds of co-ordinates.</p>
  
  <p>There is some kind of route api, as in <a href="https://stackoverflow.com/questions/3404499/plotting-a-route-on-google-maps">this post</a> but apparently it can only take 8 waypoints. Is that right?</p>
  
  <p>Ideally I'd like to draw the map by selecting a start point, an end point, and dragging the route into place; and then somehow importing that route into what I have.</p>
  
  <p>Here is the exact route that I want to import: <a href="http://www2.warwick.ac.uk/services/accommodation/landlords/12busroutes/" rel="nofollow noreferrer">http://www2.warwick.ac.uk/services/accommodation/landlords/12busroutes/</a>.</p>
  
  <p>My code to plot the properties is:</p>
  
  <pre><code>var siteRoot = "&lt;?php bloginfo('stylesheet_directory');?&gt;/";
  
  var markers = [
    &lt;?php 
    $my_query = new WP_Query( 'post_type=properties' );
      while ($my_query-&gt;have_posts()) : $my_query-&gt;the_post();
        kdev_maps('list');
      endwhile; // end of the loop. 
      ?&gt;
  ]; 
  
  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();
  });
  </code></pre>
  
  <p>Any help is much appreciated.</p>