Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Andrew Cooper
2,758 PointsAdding Point Markers to Map
I'm having trouble with adding my markers can't see map and copied code along with Andrew please help.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'> <script src="external/matchmedia.js"></script> <script src="picturefill.js"></script> <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no"> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAfOmb_J9ML-UXGkfQ1frx2fX-c7cleRl4&sensor=false"></script> </head>
<body>
<div class="container clearfix">
<div id="logo" class="grid_4">
<object data="img/logo.svg" type="image/svg+xml" class="logo">
<a href="logo.svg" >
<!--[if lte IE 8 ]-->
<img src="img/logo.gif" alt="Smells Like Bakin">
<!--![endif]-->
</a>
</object>
</div>
<div id="nav" class="grid_8 omega" >
<ul>
<li class="about"><a href="#">About</a></li>
<li class="pricing"><a href="pricing.html">Cupcakes & Prices</a></li>
<li class="locations"><a href="locations.html">Locations</a></li>
<li class="contact"><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="grid_12">
<h1 class="hero">We're kicking taste buds in to high gear from the west to the east coast with our featured avacodo chocolate cupcake.</h1>
</div>
<div id="locations" class="grid_12">
<div class="grid_6">
<h2>Orlando Store</h2>
<p>Local: <span class="contact">407-555-5555</span><br>Toll Free: <span class="contact">1-800-CUP-CAKE</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
<p class="static_map">
<img src="http://maps.googleapis.com/maps/api/staticmap?size=400x300&sensor=false&markers=622+E+Washington+Street,+Suite+240,+Orlando,+FL+32801"
alt="70 Northwest Couch StreetPortland, Oregon 97209">
</p>
</p>
<address>
622 E Washington Street, Suite 240<br>Orlando, FL 32801
</address>
</div>
<div class="grid_6 omega">
<h2>Portland Store</h2>
<p>Local: <span class="contact">503-555-5555</span><br>Toll Free: <span class="contact">1-800-CUP-CAKE</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
<p class="static_map">
<img src="http://maps.googleapis.com/maps/api/staticmap?size=400x300&sensor=false&markers=70+Northwest+Couch+StreetPortland,+Oregon+97209"
alt="70 Northwest Couch StreetPortland, Oregon 97209">
</p>
</p>
<address>
70 Northwest Couch Street<br>Portland, Oregon 97209
</address>
</div>
</div>
<div id="footer" class="grid_12">
<div id="about" class="grid_7">
<h2>Inside the Kitchen</h2>
<p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison & Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </p>
<p><a href="#" class="btn-small">Read More</a></p>
</div>
<div id="contact" class="grid_5 omega">
<h2>Get Bakin’ with Us</h2>
<p>Call us: <span>1-800-CUP-CAKE</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
<p>We announce all of our new flavors first through Facebook & Twitter, and even take requests!</p>
<object data="img/facebook.svg" type="image/svg+xml">
<a href="facebook.svg">
<!--[if lte IE 8 ]-->
<img src="img/facebook.gif" alt="Facebook">
<!--![endif]-->
</a>
</object>
<object data="img/twitter.svg" type="image/svg+xml">
<a href="twitter.svg">
<!--[if lte IE 8 ]-->
<img src="img/twitter.gif" alt="Twitter">
<!--![endif]-->
</a>
</object>
</div>
<div id="copyright" class="grid_12">
<p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#locations").prepend('<div id="map"></div>');
$(".static_map").remove();
var map;
var center;
var bounds;
var geocoder;s
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
}
function addMarkerToMap(location){ var marker = new google.maps.Marker({map: map,position: location}); bounds.extend(location); map.fitBounds(bounds); }
initialize();
$("address").each(function () {
var $address = $(this);
geocoder.geocode({address: $address.text()}),function (results, status) {
if(status == google.maps.GeocoderStatus.OK) addMarkerToMap(results [0].geometry.location);
}
});
google.maps.event.addDomListener(map, 'idle', function(){
center = map.getCenter();
});
$(widow).resize(function () {
map.setCenter(center);
});
</script>
</body>
</html>
1 Answer
Andrew Cooper
2,758 PointsNever mind I fixed it thank you!