ソース

javascript

var map;
var origin_lat,origin_lng;
var destination_lat,destination_lng;
$(document).ready(function(){
  //マーカー設定
  map = new GMaps({
    div: '#map-1',
    lat: 35.686156,
    lng: 139.759678,
    zoom:12
  });
  map.addMarker({
    lat: 35.681382,
    lng: 139.766084,
    title: '東京駅',
    infoWindow: {
      content: '東京駅'
    }
  });
  map.addMarker({
    lat: 35.690921,
    lng: 139.700258,
    title: '新宿駅',
    infoWindow: {
      content: '新宿駅'
    }
  });
  //目的地検索
  map = new GMaps({
    div: '#map-2',
    lat: 35.686156,
    lng: 139.759678,
    zoom:12
  });
  $('#search_form').submit(function(e){
    e.preventDefault();
    GMaps.geocode({
      address: $('#address').val().trim(),
      callback: function(results, status){
        if(status=='OK'){
          var latlng = results[0].geometry.location;
            map.removeMarkers();
            map.setCenter(latlng.lat(), latlng.lng());
            map.addMarker({
              lat: latlng.lat(),
              lng: latlng.lng()
            });
        }
      }
    });
    return false;
  });
  //ルート検索
  map = new GMaps({
    div: '#map-3',
    lat: 35.686156,
    lng: 139.759678,
    zoom:14
  });
  $('#origin').blur(function(){
    var origin = $(this).val().trim();
    GMaps.geocode({
      address: origin,
      callback: function(results, status){
        if(status=='OK'){
          var latlng = results[0].geometry.location;
          origin_lat = latlng.lat();
          origin_lng = latlng.lng();
        }
      }
    });
  });
  $('#destination').blur(function(){
    var destination = $(this).val().trim();
    map.removeMarkers();
    GMaps.geocode({
      address: destination,
      callback: function(results, status){
        if(status=='OK'){
          var latlng = results[0].geometry.location;
          destination_lat = latlng.lat();
          destination_lng = latlng.lng();
        }
      }
    });
  });
  $('#rotue_form').submit(function(e){
    $("#route-search").click(function(){
      map.drawRoute({
        origin: [origin_lat, origin_lng],
        destination: [destination_lat, destination_lng],
        travelMode: 'walking',
        strokeColor: '#131540',
        strokeOpacity: 0.6,
        strokeWeight: 6,
      });
    });
    $("#rotue-guidance").click(function(){
      if (!$("#instructions").length){
        $("#map-3").after('<div class="well"><ul id="instructions"></ul></div>');
      }
      map.travelRoute({
        origin: [origin_lat, origin_lng],
        destination: [destination_lat, destination_lng],
        travelMode: 'driving',
        step: function(e){
          $('#instructions').append('<li>'+e.instructions+'</li>');
          $('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
            map.setCenter(e.end_location.lat(), e.end_location.lng());
            map.drawPolyline({
              path: e.path,
              strokeColor: '#aa0000',
              strokeOpacity: 0.6,
              strokeWeight: 6
            });
          });
        }
      });
    });
    return false;
  });
});

HTML

<h4 class="index">マーカーの設定</h4>
<div id="map-1" class="map well"></div>

<h4 class="index">目的地検索</h4>
<form method="post" id="search_form">
<ul class="inline">
<li><input type="text" id="address" name="address" /></li>
<li><input type="submit" class="btn" value="検索" /></li>
</ul>
</form>
<div id="map-2" class="map well"></div>

<h4 class="index">ルート検索</h4>
<form method="post" id="rotue_form">
<ul class="inline">
<li><input type="text" id="origin" class="input-medium" name="origin" />から</li>
<li><input type="text" id="destination" class="input-medium" name="destination" />へ</li>
<li><input type="submit" class="btn" id="route-search" value="検索" /></li>
<li><input type="submit" class="btn" id="rotue-guidance" value="ルート案内" /></li>
</ul>
</form>
<div id="map-3" class="map well"></div>

参考にしたサイトなど

• gmaps.js

ソースの説明など

• gmaps.jsを使ってGoogleMapsAPIを利用してみる - ミラボ