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
Frank Cameron-Wilson
8,814 PointsjQuery context selector
Hi, When referencing the address element in the locations.html file from the map.html file. I used the context selector parent.window.document after a comma separation from the $("address") as seen below. I then copied the whole project file into my XAMPP htdocs folder and then started apache in the XAMPP program. I then opened my locations.html in my browser (chrome) and the space for the dynamic map/iframe is displayed but with no map inside. on inspection i have a uncaught securityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocole, domains and ports must match.
This error singles out the selecter line as the problem
$("address", parent.window.document).each(function() {
var address = $(this);
geocoder.geocode({address: address.text()}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK)
addMarkerToMap(results[0].geometry.location, address.text());
});
});
I have finished the project but would like to solve this problem. please help, thank you in advance.
4 Answers
Steven van der Merwe
6,966 PointsHi Frank,
I'm not quite sure on where you are using this code. But maybe you would like to give me an idea as to why you are using " parent.window.document" in your selector? If you can paste your html markup, I can also check out your selectors.
I use the following, as per the project:
<script type="text/javascript">
$("#locations").prepend("<div id='map'></div>")
$(".static_map").remove();
var map;
var center;
var bounds;
var geocoder;
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();
});
$(window).resize(function() {
map.setCenter(center);
});
</script>
Frank Cameron-Wilson
8,814 PointsIt looks like you have inserted the dynamic map into the locations.html page. the next part of this exercise is to make a map.html file and have all the javascript code for the map in this file, then reference the element with the id address in the locations.html file. the javascript code in the location.html is
<script type="text/javascript">
$("#locations").prepend('<iframe id="map" src="map.html"></iframe>');
$(".static_map").remove();
</script>
and the code in the map.html is
<body>
<div id="map"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVkxnGZKa-gmXlXShn7OqegA5v1t-BQTg&sensor=false"></script>
<script type="text/javascript">
var map;
var center;
var bounds;
var geocoder;
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, address) {
var image = "img/baby-cupcake.png";
var marker = new google.maps.Marker({map: map, position: location, icon: image});
bounds.extend(location);
map.fitBounds(bounds);
var infowindow = new google.maps.InfoWindow({content: address});
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, marker);
});
};
initialize();
$("address", parent.window.document).each(function() {
var address = $(this);
geocoder.geocode({address: address.text()}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK)
addMarkerToMap(results[0].geometry.location, address.text());
});
});
google.maps.event.addDomListener(map, "idle", function() {
center = map.getCenter();
});
$(window).resize(function() {
map.setCenter(center);
})
</script>
</body>
and as i said before once the location page is loaded in the browser, with the iframe blank, i look at the console and see this error message Uncaught securityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocole, domains and ports must match. with a reference to the problem map.html:42 which is the address selector line. The error message in the console also has a dropdown list that just says (anonymous function) which says to me that the function isn't working because it's not selecting the address element from the the parent page.
Steven van der Merwe
6,966 PointsI have pasted all your code into my project and it all seems to work fine for me. The map.html looks fine, the error also appears on my side, but doesn't prevent my map from being displayed.
Would you be able to post your full locations.html file here too? I can maybe take a look at your markup structure.
Regards, Steven
Frank Cameron-Wilson
8,814 PointsCheers Steven, So you have the same error??
<!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">
</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="index.html">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?key=AIzaSyCVkxnGZKa-gmXlXShn7OqegA5v1t-BQTg&size=400x300&sensor=false&markers=622+E+Washington+Street+Suite+240+Orlando+FL+32801" alt="622 E Washington Street, Suite 240 Orlando, FL 32801">
</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?key=AIzaSyCVkxnGZKa-gmXlXShn7OqegA5v1t-BQTg&size=400x300&sensor=false&markers=45.523783,-122.670818" alt="70 Northwest Couch Street Portland, Oregon 97209">
</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('<iframe id="map" src="map.html"></iframe>');
$(".static_map").remove();
</script>
</body>
</html>