将网站的一部分嵌入到另一个网站

Question

Hi I'm trying to use/add the free map tools which I found on this site http://www.freemaptools.com/how-far-is-it-between.htm to my current websites which are a list of tools that are commonly used by our staff, I was planning to embbed it, however it doesn't seem to have that kind of feature, and I am asking you guys if you can offer me an alternative to the task that I want to do. While doing this "ToolBox" I am also willing to make my own map tools that measures the distance between countries. If you can kindly guide me. Thank you. Here's what I've got so far

Code:

<form name="inp">
<table align="center" width="95%" border="0">
<tbody><tr>
    <td width="30"></td>
    <td align="right">City, Country</td>
    <td></td>
    <td>City, Country</td>
    <td width="30"></td>
</tr>

<tr>
<td width="30"></td>
 <td width="269" align="right">From 
<input name="pointa" type="text" value="" size="22" onkeypress="autocompletea(this.value, event)"></td>
<td width="34"><div align="center">to</div></td>
<td width="271"><input name="pointb" type="text" value="" size="22" onkeypress="autocompleteb(this.value, event)"> <input name="show" type="button" value="Show" onclick="findaandb(document.forms['inp']['pointa'].value,document.forms['inp']['pointb'].value);">
  <label></label></td>
<td width="30"></td>
</tr>
<tr>
<td colspan="2">
<div id="autocompletediva" class="autocomp" style="display: block; visibility: hidden; height: 0px; width: 0px;"></div>
</td>
<td></td>
<td colspan="2">
<div id="autocompletedivb" class="autocomp" style="display: block; visibility: hidden; height: 0px; width: 0px;"></div></td>
</tr>
<tr>
<td colspan="5"><div id="msg" class="msg">&nbsp;</div></td>
</tr>

<tr>
<td colspan="5" align="center"> Measure in :
<input name="dist" type="radio" onclick="toggleUnits('MILES');" checked="CHECKED">
<font face="verdana, geneva, helvetica" size="2">miles<input type="radio" name="dist" onclick="toggleUnits('KMS');">
 km</font>
</td>
</tr>

<tr><td colspan="5" align="center"><strong>Distance as the Crow Flies </strong> :
      <input style="display: inline;" id="distance" type="text" size="10" value="0.000" readonly="true"> 
      <img src="" alt="As the crow Flies"> </td>
</tr>
<tr>
<td colspan="5" align="center"><strong>Distance by Land Transport</strong> :
      <input style="display: inline;" id="transport" type="text" size="10" value="0.000" readonly="true">
      <img src="" alt="Land Transport"> 
</td>
</tr>
</tbody></table>
</form>

Answer 1

I think you're missing the javascript part

onkeypress="autocompletea(this.value, event)"

onclick="toggleUnits('KMS');"

onclick="toggleUnits('MILES');"

These are all javascript function calls, but what you posted is only the HTML part. Quickly reviewing the web page you posted i think that at least you're missing the following JS file. http://www.freemaptools.com/script/how-far-is-it-between.js

Although i think that if you are missing this, may be because it is your first time you are creating a web page,HTML is only the layout and JavaScript enables you to "dynamize" the HTML (well, i think that many will disagree but it's kind of).

I recommend you to have a look at a JavaScript tutorial, i don't remeber any good right now, but sure that if you google for you will find many good tutorials around there.

Hope helped

Answer 2

You can try "Iframe" or Jquery "load" function.

Here are some examples

http://www.w3schools.com/jquery/jquery_ajax_load.asp

http://www.w3schools.com/tags/tag_iframe.asp

Hope this helps....