Reputation: 39
I am trying to get a map search where the user inputs the location they want and it appears in an iframe below, so user looks for London and the URL would bring back google.com/maps&location=london. I cannot get the output part to work so far;
I feel I am so close just can't work out how to move the location to the iFrame
<div class="search">
<div class="row">
<div class="large-6 medium-6 small-12 columns">
<div class="postcode-wrapper">
<form class="lookup-form">
<input type="text" class="postcode" placeholder="Location" >
<input type="submit" class="go-btn" value="Search"/>
<a href="#" class="fancybox go" style="position:absolute; left:-99999px" data-fancybox-type="iframe">Search</a>
<div class="form-error"></div>
</form>
<script>
jQuery('form').submit(function (evt) {
evt.preventDefault();
var error = false;
var error_list = [];
var $postcode = jQuery('.postcode').val();
if($postcode == ''){
error = true;
error_list.push('Location is required');
}
console.log(error);
if(error === true){
jQuery('.form-error').show();
jQuery('.search-results').hide();
jQuery('.form-error').html('');
for(i=0;i<error_list.length;i++){
jQuery('.form-error').append(error_list[i]+'<br/>');
}
}else if(error === false) {
jQuery('.form-error').hide();
jQuery('.postcode-wrapper .go').click(function(){
jQuery(".search-results").slideDown("slow");
});
var location = encodeURIComponent(jQuery('.postcode-wrapper .postcode').val());
console.log(location);
jQuery('.postcode-wrapper .go').click();
}
return false;
});
</script>
</div>
</div>
</div>
</div>
<div class="search-results">
<div class="map">
<iframe src="http://google.com/maps&location=OUTPUTHERE" width="100%" height="400" frameborder="0"></iframe>
</div>
</div>
Upvotes: 0
Views: 67
Reputation: 9372
So you just need to be able to pass the location to the src?
Use $('#selector').attr('src', value);
Also, your var
declaration used the wrong selector to get the value.
}else if(error === false) {
jQuery('.form-error').hide();
jQuery('.postcode-wrapper .go').click(function(){
jQuery(".search-results").slideDown("slow");
});
var location = encodeURIComponent(jQuery('.postcode').val()); // Fix your selector
console.log(location);
$('iframe').attr('src', 'https://google.com/maps&location=' + location); // Add this
jQuery('.postcode-wrapper .go').click();
}
And one last thing, I believe the url is wrong and it should be https://www.google.com/maps/place/locationvariable.
Upvotes: 1