Question

我尝试将Google地图添加到我的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;
}

Answer 1

您必须在myMap ID Div

中添加地图iframe

<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>

将Google Map添加到html doc

1 个答案: