INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Google map iframe problem

Google map iframe problem

(OP)
Good day,

I am doing a website where I have several restaurants and when you click on the restaurant you are looking for it opens a Google map in an iframe inside the same webpage. This is working OK but I would like to add the contact details of the particular restaurant next to the iframe. Somebody that can perhaps help me?

RE: Google map iframe problem

Hi,
one way of doing this is to follow the steps below :-


1. Put an iframe in the website page where you want to display the map and contact details using the following code :-

CODE --> html

<iframe src="restaurantlinks.htm" width="750" height="500" frameborder="10" name="iframe0"></iframe> 


2. Create an html page containing restaurant links using the following code:-


CODE --> html

<!DOCTYPE html>
<html>
<body>

<div style="float: left; margin: 10px;" width="750" height="500">

<h2>Select a Restaurant from the links below<br><br>A Google Map showing the Restaurant Location and Contact details will be displayed here</h2>

<a href="restaurant1.htm">Restaurant 1</a> | <a href="restaurant2.htm">Restaurant 2</a> | <a href="restaurant3.htm">Restaurant 3</a> | <a href="restaurant4.htm">Restaurant 4</a>


</body>
</html> 
and save it in the same place as your main website page as "restaurantlinks.htm" . When you open your main website page, this links page will appear in the iframe

3. Create identical pages for each restaurant using the following code :-

CODE --> html

<!DOCTYPE html>
<html>
<body>

<div style="float: left; margin: 10px;">
<h2>The Prince Alfred <a href="javascript: history.go(-1)">Go Back to List</a></h2>

<div style="margin: 10px; width: 770px; height: 500px;">



<iframe style="float: left;" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?

f=q&source=s_q&hl=en&geocode=&q=restaurants+in+London&aq=1&oq=restaurants+in+london+west+end&sll=51.511283,-

0.128314&sspn=0.031997,0.103083&ie=UTF8&hq=restaurants&hnear=London,+United+Kingdom&t=m&fll=51.532535,-

0.185051&fspn=0.015991,0.051541&st=115968771510351694523&rq=1&ev=zi&split=1&ll=51.524642,-

0.184752&spn=0.031984,0.103083&z=14&iwloc=A&cid=17290207397040793508&output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?

f=q&source=embed&hl=en&geocode=&q=restaurants+in+London&aq=1&oq=restaurants+in+london+west+end&sll=51.511283,-

0.128314&sspn=0.031997,0.103083&ie=UTF8&hq=restaurants&hnear=London,+United+Kingdom&t=m&fll=51.532535,-

0.185051&fspn=0.015991,0.051541&st=115968771510351694523&rq=1&ev=zi&split=1&ll=51.524642,-

0.184752&spn=0.031984,0.103083&z=14&iwloc=A&cid=17290207397040793508" style="color:#0000FF;text-align:left"></a></small>


<div style="float: left; margin: 10px; padding: 10px; border: 2px solid black; height: 345px; width: 150px;">
<p>
The Prince Alfred
</p>
<p>
Contact details :<br><br>
TEL: 
<br><br> 
Website : 
<br><br>
Email : 
</p>
</div>

</div>

</body>
</html> 
Save this code as "restaurant1.htm". Note that css float style has been added to the example Google Map Embed iframe link !! This is the bit shown in red in the code. Also fill in the relavant details for restaurant ie the name in the H2 header and contact details for that restaurant.

I've put in the details for the "Prince Alfred" restaurant in London in the above code as a demo for you.

4. Copy and paste the code for each restaurant and save the pages in the same place as your main website page as "restaurant2.htm" , "restaurant3.htm" etc changing the Google link and Restaurant details each time

Hope this is clear and is a help

Steve (Datamasher)

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close