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

1 Views

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?

Read More

Thanks in advance

Cheers

Post Views: 1

Related posts

Leave a Reply

1 comment

  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/