How to get Google Maps route planner on website's iframe

问题

I'm programming a new (wordpress) website and there is a "Contact" menu item. In this menu item I got a map (code by Google Maps iframe). Now I should have a route planner under the map. For this I got a little code:

<form name="search_route" method="get" action="http://maps.google.com/" target="_blank">
        <input name="saddr" type="text" id="saddr">
        <input name="daddr" type="hidden" id="daddr" value="Empire State Building, 350 5th Avenue, New York, NY, USA">
        <input type="submit" name="Submit" value="Submit">
    </form>

My problem: The code is working, but it links to maps.google.com like I told the form. But the route should plan on the iframe I got on the page and not open another link. Is this possible? If yes, can someone give me a hint?

Thanks in advance

Cheers

回答1:

Sample-code:

<form method="get" action="https://www.google.com/maps" target="mapframe">
        <input name="saddr" type="text" id="saddr">
        <input name="output" type="hidden" value="embed">
        <input name="f" type="hidden" value="d">
        <input name="z" type="hidden" value="11">
        <input name="daddr" type="hidden" id="daddr" 
               value="Empire State Building, 350 5th Avenue, New York, NY, USA">
        <input type="submit" name="Submit" value="Submit">
</form>
<iframe 
  name="mapframe" width="425" height="350" 
  src="https://www.google.com/maps?z=11&amp;f=d&amp;output=embed&amp;ll=40.7902,-73.9597">
</iframe>

The action of the form has to be https://www.google.com/maps
The target of the form has to be equal to the name of the iframe

Add hidden inputs to the form for each parameter you got via the iframe-src of the embed-code(at least a field for output:embed is required)

Demo: http://jsfiddle.net/doktormolle/3JsuM/

来源：https://stackoverflow.com/questions/18687603/how-to-get-google-maps-route-planner-on-websites-iframe

标签

html