Маршрут

HTML

<div id="find_route">Если хотите, можете <form action="javascript:"><input id="address" type="text" value="ввести здесь свой адрес в Петербурге">, нажать <input id="submit_address" type="submit" value="эту кнопку"> — и мы покажем, как лучше добраться.</form></div>

CSS

#find_route { font: .75em Arial; }

#find_route form, #find_route input {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

#find_route #address {
    width: 18em;
    border-bottom: 1px solid #ccc;
    word-spacing: normal;
}

#find_route #submit_address {
    margin-right: .2em;
    padding: 0 .15em .15em;
    border: 1px solid #ccc;
}

#find_route #map {
    display: none;
    margin-top: .5em;
    background: #fff;
    border: 0;
    width: 40em;
    height: 40em;
}

iframe { border: 0; }

JavaScript

$("#address")
    .mouseover(function() {
        if($(this).attr("value")=="ввести здесь свой адрес в Петербурге") $(this).removeAttr("value"); })
    .mouseout(function() {
        if(!$(this).attr("value")) $(this).attr("value", "ввести здесь свой адрес в Петербурге"); });

$("#find_route form").submit(function() {
    var map = "http://maps.google.com/maps?sll=59.9552,30.3116&saddr="+$("#address").val()+"&daddr=59.9552,30.3116&dirflg=r&output=embed";
    $("#map").remove();
    $("#find_route").append("<iframe id=\"map\" src=\""+map+"\" />");
    $("#map").animate({ opacity: "toggle" }, 700);
});