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