2015-11-03 118 views
-1

我試圖添加一個谷歌地圖到我的HTML。我被給了一個具體的一步一步的指導,並遵循所有的步驟,但它不工作! 有誰能告訴我我做錯了嗎?我添加了地圖添加谷歌地圖到HTML文件

一切都放在大膽(**文本週圍)

這裏是我的html:

<!DOCTYPE html> 
<!-- saved from url=(0055)http://137.111.167.137:8080/mas241/general/default.html --> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<meta charset="utf-8"> 

<title>Recipes</title> 

<link href="website.css" rel="stylesheet"> 

**<script src="http://maps.google.com/maps/api/js?sensor=true"></script>** 

<script src="WEBSITE/jquery-1.11.3.min.js"></script> 

**<script src="jquery.ui.map.full.min.js"></script>** 

<script> 
$(document).ready(function() { // do not delete this line 

    **$('#myMap').gmap({ 
     'center': '-33.89112,151.24597', 
     'zoom': 15, 
     'MapTypeId': google.maps.MapTypeId.ROADMAP 
    });** 

}); // do not delete this line 
</script> 

</head> 

<body> 

<div id="container"> 
    <header> 
     <label id="mysearchtext" for="mysearch">Looking for something? </label> 
     <input id="mysearch" type="search" placeholder="search"/> 
    </header> 

    <div id="menu"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="paleo101.html">What is Paleo?</a></li> 
      <li><a href="benefit.html">Benefits</a></li> 
      <li><a href="foodlist.html">Food list</a></li> 
      <li><a href="recipes.html">Recipes & Cooking tips</a> 
       <ul> 
        <li><a href="redmeat.html">Red Meat</a></li> 
        <li><a href="poultry.html">Poultry</a></li> 
        <li><a href="pork.html">Pork</a></li> 
        <li><a href="fish.html">Fish/Seafood</a></li> 
        <li><a href="eggs.html">Eggs</a></li> 
        <li><a href="soups.html">Soups</a></li> 
        <li><a href="snacks.html">Snacks</a></li> 
        <li><a href="desserts.html">Desserts</a></li> 
        <li><a href="salads.html">Salads</a></li> 
        <li><a href="sidevegetables.html">Sides/Vegetables</a></li> 
        <li><a href="drinks.html">Drinks</a></li> 
        <li><a href="sauces.html">Sauces</a></li> 
       </ul> 
      </li> 
      <li><a href="mistakes.html">Am I doing it right?</a></li> 
      <li><a href="faq.html">Paleo FAQ</a></li> 
     </ul> 
    </div> 

     <div class="recipeimg"> 

      <a href="redmeat.html"><img src="images/recipe-redmeat.jpg" class="img4"/></a> 

      <a href="poultry.html"><img src="images/recipe-poultry.jpg" class="img4"/></a> 

      <a href="pork.html"><img src="images/recipe-porc.jpg" class="img4"/></a> 

      <a href="fish.html"><img src="images/recipe-seafood.jpg" class="img4"/></a> 

     </div> 

     <div class="recipeimg1"> 

      <a href="eggs.html"><img src="images/recipe-egg.jpg" class="img4"/></a> 

      <a href="soups.html"><img src="images/recipe-soup.jpg" class="img4"/></a> 

      <a href="snacks.html"><img src="images/recipe-snack.jpg" class="img4"/></a> 

      <a href="desserts.html"><img src="images/recipe-dessert.jpg" class="img4"/></a> 

     </div> 

     <div class="recipeimg2"> 

      <a href="salads.html"><img src="images/recipe-salad.jpg" class="img4"/></a> 

      <a href="sidevegetables.html"><img src="images/recipe-vegetable.jpg" class="img4"/></a> 

      <a href="drinks.html"><img src="images/recipe-drink.jpg" class="img4"/></a> 

      <a href="sauces.html"><img src="images/recipe-dip.jpg" class="img4"/></a> 

     </div> 

     <div class="bottom"> 

      <p> Feeling tired after a long day of work? Forgot your lunch? Not a problem! Here is a the address of a delicious paleo cafe, excellent in case of an emergency or if you just feel like it! </p> 

      **<div id="myMap"></div>** 

     </div> 

<div style="clear:both;"></div> 

    <footer> 

    <ul> 
    <li><p>Copyright 2015 All Rights Reserved.</p> 
    <p id="reference"><a href="references.html">References</a></p></li> 
    <li><p><span class="footer1">ABOUT</span></p> 
    <p class="textfooter">This website is entirely about guiding you in your Paleo journey. I hope you enjoy it and have a lovely experience!</p></li> 
    <li> 
    <p><span class="footer1">GET SOCIAL</span></p> 
    <p id="images"> 
     <a href="https://www.facebook.com/paleodietMAS241/" target="_blank"><img src="images/Facebook_Logo.png" class="img"/></a> 
     <a href="https://instagram.com/paleodietmas241/" target="_blank"><img src="images/Instagram_Logo.png" class="img"/></a> 
     <a href="https://twitter.com/paleodietmas241" target="_blank"><img src="images/Twitter_Logo.png" class="img"/></a> 
    </p> 
    </li> 
    </ul> 

    </footer> 

<div style="clear:both;"></div> 
</div> <!-- close container --> 

</body> 

</html> 

,這裏是我的CSS:

#myMap { 
width: 800px; 
height: 450px; 
border: 3px solid #000000; 
margin: auto; 
} 

回答

0

你必須添加地圖iframe在myMap ID Div

<div id="myMap"> 
    <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"width="100%" height="443" 
      src="https://maps.google.com/maps?hl=en&q=Pariser Platz, 10117 Berlin&ie=UTF8&t=roadmap&z=6&iwloc=B&output=embed"> 
     <div> 
      <small> 
       <a href="http://embedgooglemaps.com">embedgooglemaps.com</a> 
      </small> 
     </div> 
     <div></div> 
    </iframe> 
</div>