I'm doing a project in Jquery Mobile and having a problem with the Google API. When I navigate to the MapPage from diffrent page the MapPage by itself shows the map OK, but when moving from the HomePage to MapPage it only shows half of the map. If I manually refresh or resize map it will fix it - but I've tried map.resize() without luck so I need a different solution.
I've attached my HTML code of the HomePage and MapPage below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Project - Mobile" />
<meta name="author" content="Yuval Vardi" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RentAcar</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="JS/jquery-2.0.2.js"></script>
<script src="JS/jquery.mobile-1.3.1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="JS/mapScript.js" > </script>
</head>
<body>
<div id="HomePage" data-role="page" data-add-back-btn="true">
<div data-role="header">
</div>
<div data-role="content">
Trip Info
</div>
<div data-role="footer" class="mainFooter">
<h2> © Copyright Yuval Vardi </h2>
<p class="yearNow"> </p>
</div>
</div>
<div id="calculate" data-role="page" data-add-back-btn="true">
<div data-role="header">
</div>
<div data-role="content">
<table id="mapTable">
<tr>
<td>
<p>Pickup location</p>
</td>
<td></td>
<td>
<p>Where do you go?</p>
</td>
</tr>
<tr>
<td>
<input id="startInput" type="text" value="" placeholder="Start location" />
</td>
<td></td>
<td>
<input type="text" id="end" placeholder="Return location"/>
</td>
</tr>
<tr>
<td data-role="controlgroup">
<button id="myLocation" onclick="getMarker()" data-role="button" data-theme="e" > Find me </button>
</td>
<td></td>
<td data-role="controlgroup">
<button onclick="calcRoute()" data-theme="b" > Calculate rout </button>
</td>
</tr>
<tr>
<td colspan="3">
<div id="map-canvas" style="width:400px; height:280px;">
</div>
</td>
</tr>
</table>
</div>
<div data-role="footer" class="mainFooter">
<h2> © Copyright Yuval Vardi </h2>
<p class="yearNow"> </p>
<a class="ui-btn-right" href="#HomePage" data-role="button" data-icon="home" data-iconpos="top" >Home</a>
</div>
</div>
</body></html>
My javascript file:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var israel = new google.maps.LatLng(32.0938254, 34.7786934); // the var for our initial point
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: israel // where to center the map on initial!
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
initialize();
var start = document.getElementById('startInput').value;
var end = document.getElementById('end').value;
var distanceInput = document.getElementById("distance");
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
}
});}
google.maps.event.addDomListener(window, 'load', initialize);
function getMarker() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
}
function showPosition(position) {
var lat=position.coords.latitude;
var long=position.coords.longitude;
marker(lat,long); //calls the marker function
}
function showError(error)
{
alert ("Error loading map");
}
function marker(lat,long) {
var myLatlng = new google.maps.LatLng(lat,long);
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$("#startInput").attr("value",myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"You are Here!"
});
}
The map div has zero width. To use a percentage width, you have to define the width of all its parents (or at least up to a fixed size element that can be used to compute the width).
See Mike Williams' Google Maps API v2 tutorial page on percentage sizing
You need to call checkResize() API function. Like This:
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.checkResize()
This one worked for me as well
Related
I am trying to get on my website the gmaps with few markers but i am getting the grey screen or partially grey screen.Before, I used google maps API the same way and everythings works fine. If you can help me I would be grateful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zadanie 7</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"></script>
</head>
<body>
<div class="container-fluid" id="map" style="height: 500px;">
</div>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Zadanie 6 Martin Kranec</h4>
<ul class="nav nav-pills nav-stacked">
<li>Prvá Stránka</li>
<li>Druhá Stránka</li>
<li class="active">Tretia Stránka</li>
</ul><br>
</div>
<div class="container-fluid">
<div class='container-fluid'><div class='table-responsive'><table class='table'><thead><tr><th>Vlajka</th><th>Štát</th><th>Počet Navštevníkov</th></tr></thead><tbody><tr><td>World</td><td>World</td><td>2</td></tr><tr><td><img class='flag' src='http://www.geonames.org/flags/x/sk.gif'></td><td><a href='countrystatistics.php?countrycode=sk'>Slovensko</a></td><td>2</td></tr></tbody></table></div></div> </div>
</div>
</div>
<footer class="container-fluid">
<p>©Martin Kranec Webové technológie</p>
</footer>
<script type='text/javascript'>
var lat=[];
var lon=[];
lat.push(48.15);
lon.push(17.1167);
lat.push(48.1704);
lon.push(17.4209);
</script>
<script>
function initMap() {
//alert(lat[1]);
var mapProp = {
center: new google.maps.LatLng(89, -25),
zoom: 4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var count = lat.length;
for (var i = 0; i < count; i++) {
var myLatLng = {lat: lat[i], lng: lon[i]};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ''
});
}
}
initMap();
//initMap();
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=initMap"></script>-->
</body>
</html>
and here is my website where I work on this project http://147.175.98.165/zadanie7/thirdpage.php
Google maps has a lot of race conditions. I use this code a lot to display them instead. This code should be in a ready event like jquery ready.
new Promise(function (resolve, reject) {
if (!document.getElementById('google-maps')) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
var link = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=mapsFinishedLoading";
fileref.setAttribute("async", "async");
fileref.setAttribute("defer", "defer");
fileref.setAttribute("src", link);
fileref.setAttribute("id", 'google-maps');
window.mapsFinishedLoading = resolve;
document.getElementsByTagName("body")[0].appendChild(fileref);
} else {
resolve();
}
}).then(function (result) {
//Your map should be available now
mapOptions={};//put your options here
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});
Make sure your map div is visible before calling
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
Hello Stackoverflow Coders, I have created another google map with a form input that collects users address and populates it on a map. I have followed a correction created in this link below
Google map content not showing inside Bootstrap modal view
but still yet I cannot get the map to display inside a modal view. If run it on a normal page it will be okay.
can someone help me with that?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places®ion=ng&language=en&sensor=true&key=AIzaSyAlb3bRgk_Jq3mBzgpVyLTeeKL-RKaSkx4"></script>
</head>
<body>
<div class="container">
<h2>Google Map</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open MAP</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<br> Address:
<input id="searchTextField" type="text" size="50" style="">
<br>
<div id="test" style="height: 300px;width: 100%;margin: 0.6em;"></div>
<!-- MAP -->
<script type="text/javascript">
$(function getMap() {
var lat = 13.034118,
lng = 77.5679959;
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
//zoomControl: true,
//zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_left
}
},
map = new google.maps.Map(document.getElementById('test'), mapOptions),
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
google.maps.event.addListener(map, 'click', function(event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
infowindow.close();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"latLng": event.latLng
}, function(results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("#searchTextField").val(results[0].formatted_address);
}
});
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
//infowindow.open(map, marker);
}
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Tiles may not load if your map canvas is invisible when map is initializd.But you can trigger tiles loading by using resize.Since you are using you need to first store a reference to map object.
map = new google.maps.Map(document.getElementById('test'), mapOptions),
tmp = map;
And call resize event on map when your modal gets shown
$('#myModal').on('shown.bs.modal', function () {
google.maps.event.trigger(tmp, 'resize')
})
I downloaded this code on google map using jquery mobile from this site. when i run this code direct on the browser, it works but when i called it from another page it display every other content on the page except the google map unless i reload the page. now i need to manually refresh the google map div in the code below when button is clicked using juery eg.
<div id="map_canvas" style="height:300px;" id1="show"></div>
below is the entire code
<!DOCTYPE html>
<html>
<head>
<title>jQuery mobile with Google maps geo directions example</title>
<meta content="en" http-equiv="content-language">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
$(document).on("pageinit", "#map_page", function() {
initialize();
});
$(document).on('click', '#submit', function(e) {
e.preventDefault();
calculateRoute();
});
var directionDisplay,
directionsService = new google.maps.DirectionsService(),
map;
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
//var mapCenter = new google.maps.LatLng(21.5255962, 39.167697299999986);
var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);
var myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
}
function calculateRoute()
{
var selectedMode = $("#mode").val(),
start = $("#from").val(),
end = $("#to").val();
if(start == '' || end == '')
{
// cannot calculate route
$("#results").hide();
return;
}
else
{
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
$("#results").show();
/*
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
alert(myRoute.steps[i].instructions);
}
*/
}
else {
$("#results").hide();
}
});
}
}
</script>
</head>
<body>
<div data-role="page" id="map_page">
<div data-role="header">
<h1><a href="#">jQuery mobile - Google maps directions service</h1>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:300px;" id1="show"></div>
<div data-role="fieldcontain">
<label for="from">From</label>
<input type="text" id="from" value="Goteborg, Sweden"/>
</div>
<div data-role="fieldcontain">
<label for="to">To</label>
<input type="text" id="to" value="Stockholm, Sweden"/>
</div>
<div data-role="fieldcontain">
<label for="mode" class="select">Transportation method:</label>
<select name="select-choice-0" id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
</select>
</div>
<input type="button" value="Reload Page" />
<a data-icon="search" data-role="button" href="#" id="submit">Get directions</a>
</div>
<div id="results" style="display:none;">
<div id="directions"></div>
</div>
</div>
</div>
</body>
</html>
Have you tried this?
In your
$(document.ready(function() {
$('#button_click_id').click(function(){
//your code
});
});
Try this.
$("#button_id'").click(function(){ initialize(); });
I am trying to add google maps for my form, so after they enter the address they can view map and after that maps latitude and longitude submitted to the database. So far I couldn't implement it. I tried it on jsfiddle and it worked. But when i try to add to the page it not working.
http://jsfiddle.net/pborreli/pJgyu/
Here is the full page.
<!DOCTYPE html>
<htmllang-"en">
<head>
<meta charset="utf-8">
<title>My First Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<!--<link href="css/docs.css" rel="stylesheet">-->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$("#address").change(function() {
var geocoder = new google.maps.Geocoder();
var add = $("#address").val();
geocoder.geocode( { 'address': add}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
});
</script>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My First Guide</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Write a review</li>
<li>Talk</li>
<li>Events</li>
<li>
<form class="navbar-search pull-left">
<!--You can put class="search-query" too.-->
<input type="text" class=".navbar-search" placeholder="Search">
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- div container -->
</div><!-- div navbar-inner -->
</div><!-- navbar navbar-fixed-top -->
<div class="container">
<form class="form-horizontal">
<fieldset>
<legend>Submit Business Place</legend>
<div class="control-group">
<label class="control-label" for="input01">Business Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Please specify the name of business.(May
be it is a brand name)</p><br />
</div>
<div class="control-group">
<label class="control-label" for="input01">Address</label>
<div class="controls">
<input type="text" class="input-xlarge" id="ad">
<p class="help-block">To use lines please specify
‹br/› tag.</p><br/>
<div id="map"></div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Description</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="10"></textarea>
</div>
</div>
<label class="control-label" for="input01">Categories</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Use comma as a separator.</p><br />
</div>
</fieldset>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>
But here is javascript stuff.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
$("#address").change(function() {
var geocoder = new google.maps.Geocoder();
var add = $("#address").val();
geocoder.geocode( { 'address': add}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
});
</script>
And here is the div where i add my map.
<div class="control-group">
<label class="control-label" for="input01">Address</label>
<div class="controls">
<input type="text" class="input-xlarge" id="ad">
<p class="help-block">To use lines please specify
‹br/› tag.</p><br/>
<div id="map"></div>
</div>
I've done a quick scan of your code and there seem to be some basic coding problems:
You appear to create your map in an intialize function, but your initialize function appears to be embedded within the larger .change() callback function; I do not see how your map is ever going to be displayed.
Your JavaScript code is focused on a jQuery search for an element with the id: address, but there does not appear to be an element with that id in your markup.
The label you define that contains the text Address says that it is a label for: input01, but you have 2 distinct elements in your markup that have been assigned the id: input01.
There are multiple labels that have been marked as being the label for: input01.
All of the script tags you have defined at the bottom of your file are missing the type attribute.
I think you have too many basic coding errors and it looks like you may have possibly garbled the code during the process of submitting it for review? It's hard to tell, but I hope my feedback is helpful and will help you to get closer to your goal.
I am developing a Django Application that takes a location on one page and searches the database for real estate listings in that area and returns the results on the next page. The Second page also displays location entered in page 1
i want to know what is going wrong with my code
i am access the value of that variable through 'ghar' object and storing it in a variable called address in javascript
My Header scripts and html file are
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type=text/javascript" src="{{ MEDIA_URL }}maps.js"></script>
.....
<div id="map_canvas"></div>
My maps.js file is
var geocoder;
var map;
var address ="{{ghar.place}}";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
ghar is the name of the object that has the place attribute stored in the database by django models
I HAVE MADE A FEW CHANGES TO THIS
This is what i am currently stuck at
ok...i tried doing this thing...
i have placed my Jquery javascript in the HTML file itself
the HTML file is
<!DOCTYPE HTML>
<html>
<head><title>Ghar Nivas</title>
<link type="text/css" rel="stylesheet" href="{{ MEDIA_URL }}searchresult.css" />
<link type="image/png" rel="icon" href="{{ MEDIA_URL }}gharnivaslogo.png">
<script type="text/javscript" src="{{ MEDIA_URL }}jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var address = {{ area }};
var geocoder;
var map;
function codeaddfunc(){
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder.geocode( { 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
}
</script>
</head>
<body class="back" onload="codeaddfunc()">
<div align="right" >Home</div>
<img height="180" width="500" src="{{ MEDIA_URL }}ghar.png" alt="logo here"/>
<table >
<tr valign = "top" >
<td width="20%" >
<h3 class="whitecolor">Search</h3>
<label class="whitecolor">Price Range</label>
<form action="/second_search/" method="get" >
<div class="whitecolor" >
From: <input type="text" name="fromRange" placeholder="5000" id="fromRange" style="width:100px;" /> <br/>
To: <input type="text" name="toRange" placeholder="10000" id="toRange" style="width:100px;" />
</div>
<br />
<div class="whitecolor" >
Specify Area: <input type="text" name="txtSearch" id="txtSearch" style="width:100px;" />
</div>
<input type="submit" value="Search Again" />
</form>
</td>
<td bgcolor="#FFFFFF"><br/></td>
<td>
<div>
<table width="500px">
<tr>
<td>
{% if ghar %}
{% for g in ghar %}
<div class="whitecolor" >
{{ g.nameOfVenture }} <br/>
Location: {{ g.place }}<br/>
Price: {{ g.price }}
Ownner Name: {{ g.ownerName }}<br/>
Owner Contact: {{ g.ownerContact }}<br/>
</div>
<hr />
{% endfor %}
{% else %}
<p class="whitecolor" >No gharnivas matched your search criteria.</p>
{% endif %}
</td>
</tr>
</table>
</div>
</td>
<td >
<div id="map_canvas"></div>
</td>
</tr>
</table>
</body>
</html>
even on going to this page and "viewing the source" the value of the variable address comes as the one specified in the previous page as i have created a global variable in django called area
YET the corresponding map does not show up in the HTML page
What do you think is the reason for this?
where am i going wrong
Is your Javascript file processed by Django at all? If you are using the staticfiles application, or letting your web server directly serve the static files, your variable will never be substituted.
You have two choices:
either serve JS code which is created dinamically
or declare a global variable.
For the former option, you can do something like this (that reference is for CSV files, but it would work for any other content type). This would have the disadvantage that you have to regenerate your whole JS files each time for that variable.
For the latter option you can do something like this in your template
<script type=text/javascript">var address = "{{ ghar.place|escapejs }}";</script>
As a variant, instead of using a global variable, you can pass it as an argument to a function.