Passing Django variable in template JS - javascript

I am using the Django framework. In my template I have an variable {{i.slot.place.latitude}} and other is {{i.slot.place.longitude}}
I want to use these variables in java script with google map. which is-
<script type="text/javascript">
var map;
var myCenter = new google.maps.LatLng({{interview.slot.location.place.latitude}} ,{{ interview.slot.location.place.longitude }});
var marker = new google.maps.Marker({
position: myCenter
});`
here in google.maps.LatLng I am trying to give these variable but it's not working. Can somebody tell me the right way?

You need to serialize data in your view manually https://docs.djangoproject.com/en/dev/topics/serialization/

Related

HERE Maps API JavaScript for Qualtrics

I am trying to insert a HERE Map API into a Qualtrics variable using JavaScript. I have tried to insert code into the JavaScript of a short text variable to bring up my HERE map using my HERE API that is all set up with the services needed, but nothing is showing up when I preview the survey. I am trying to determine where in the Qualtrics code I can return the map so it appears in the survey variable.
If anyone has any input/advice/code, I am all ears! Thank you!
This is the code I have in the header (under general settings):
src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"
src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"
This is the code I have in the javascript:
var platform = new H.service.Platform({
'apikey': '{MYAPIKEY}'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.vector.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
Two things you should try if you haven't already:
Put your JS code inside the Qualtrics addOnload function.
Add a div with the id mapContainer to your question text (use HTML View)

how to get database value into javascript google map

i know there is the same question like mine but i still don't understand...
i want to make a google map with value in my database
there are 3 value in my database: name, lat, and lon.
and i want to get this value and add this into my javascript.
here is my google map script (stil fresh from w3school) :
<script>
var myCenter=new google.maps.LatLng(51,508743,-0,12085);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
i have read this question :Getting database values in Javascript variable dynamically .
but still dont understand how it works, what do i need to add and what do i need to change. please help
In which language?
In PHP you have to just use your variables with db table column values in place of long and lat.
e.g. and
var myCenter=new google.maps.LatLng(,);
Let me know if you want the multiple maps with in the loop.
Vikash

Injecting Javascript From Meteor Template

I'm pulling long, lat coords from my collection and I want to generate dynamic Google Map Markers onto the map in the page.
The data is populating fine in the source, but the markers fail to show on the page.
Is it possible to inject a javascript object into the <script></script> tags?
Javascript
Template.maps.onRendered(function() {
var map = new google.maps.Map(this.find('.map'), {zoom: 8, center: new google.maps.LatLng(33.658206, -111.962827)});
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
});
HTML
<template name="maps">
<div id="map-canvas"></div>
</template>
Don't mix html and js. Put all the javascript inside methods of relevant template.
Template.mapWrapper.onRendered(function() {
var map = new google.maps.Map(this.find('.map'), {...});
_.each(locations, function(location) {
marker = new google.maps.Marker({...});
});
});
You should also use classes or data parameters instead of element id, but most importantly, don't mix html and js.

Get the parameters of a JavaScript function with Scrapy

I was wondering if it is possible to extract the parameters of a JavaScript function with Scrapy, from a code similar to this one:
<script type="text/javascript">
var map;
function initialize() {
var fenway = new google.maps.LatLng(43.2640611,2.9388228);
};
}
</script>
I would like to extract the coordinates 43.2640611 and 2.9388228.
This is where re() method would help.
The idea is to locate the script tag via xpath() and use re() to extract the lat and lng from the script tag's contents. Demo from the scrapy shell:
$ scrapy shell index.html
>>> response.xpath('//script').re(r'new google\.maps\.LatLng\(([0-9.]+),([0-9.]+)\);')
[u'43.2640611', u'2.9388228']
where index.html contains:
<script type="text/javascript">
var map;
function initialize() {
var fenway = new google.maps.LatLng(43.2640611,2.9388228);
};
}
</script>
Of course, in your case the xpath would not be just //script.
FYI, new google\.maps\.LatLng\(([0-9.]+),([0-9.]+)\); regular expression uses the saving groups ([0-9.]+) to extract the coordinate values.
Also see Using selectors with regular expressions.
Disclaimer: I haven't tried this approach, but here's how I would think about it if I was constrained to using Scrapy and didn't want to parse JavaScript the way alecxe suggested above. This is a finicky, fragile hack :-)
You can try using scrapyjs to execute the JavaScript code from your scrapy crawler. In order to capture those parameters, you'd need to do the following:
Load the original page and save it to disk.
Modify the page to replace google.maps.LatLng function with your own (see below). make sure to run your script AFTER google js is loaded.
Load the modified page using scrapyjs (or the instance of webkit created by it)
Parse the page, look for the two special divs created by your fake LatLng function that contain the extracted lat and lng variables.
More on step 2: Make your fake LatLng function modify the HTML page to expose lat and lng variables so that you could parse them out with Scrapy. Here is some crude code to illustrate:
var LatLng = function LatLng(lat, lng) {
var latDiv = document.createElement("div");
latDiv.id = "extractedLat";
latDiv.innerHtml = lat;
document.body.appendChild(latDiv);
var lngDiv = document.createElement("div");
lngDiv.id = "extractedLng";
lngDiv.innerHtml = lng;
document.body.appendChild(lngDiv);
}
google = {
map: {
LatLng: LatLng
}
};
Overall, this approach sounds a bit painful, but could be fun to try.

Some Google Map features not appearing when used in Blogger

I am trying to add a Google Map on a blog (using Blogger). The script retrieves each post in the blog using the Blogger API and get its location (Lat/Lng). It creates a map that shows a polyline connecting all these places. It also shows a marker at the last place visited and center the map there as well (here, it should be Buenos Aires).
I wrote a little html/javascript piece of code to do that and it works fine in a browser (First image below). However, when I try to include the html code on the blogger page/post, some features of the map are not there anymore (Second image below).
It is very strange because the path (Polyline) is correctly shown but not the marker. In addition, the properties of the map are not taken into account (ie: center position, satellite view). However, when I move the map around, the correct map appears for a fraction of a second from time to time!
Here is the link to the blog where I am testing this:
http://testblogapinico.blogspot.ch/p/map.html
And the actual code that produces the first map (I simply copy/pasted this in the blog post to get the second map):
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>
<div id="googleMap" style="width:600px;height:900px;"></div>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var Lat = new Array();
var Lng = new Array();
var Place = new Array();
// Get latitude/longitude from Blogger
function handleResponse(response) {
for(i=0; i< response.items.length; i++){
Lat.push(response.items[i].location.lat);
Lng.push(response.items[i].location.lng);
Place.push(response.items[i].location.name);
}
}
// Create the map based on locations retrieved from Blogger
function initialize(){
// Get all latitude and longitude
var pos = new Array();
// Get the path
for(var i=0; i<Lat.length; i++){
pos[i]=new google.maps.LatLng(Lat[i],Lng[i]);
}
// Get the last position
var lastpos=new google.maps.LatLng(Lat[0],Lng[0]);
// Create the map
var mapProp = {
center:lastpos,
zoom:4,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
// Create the marker of last position
var marker=new google.maps.Marker({
position:lastpos,
});
marker.setMap(map);
// Create the path
var flightPath = new google.maps.Polyline({
path:pos,
strokeColor:"#EE0000",
strokeOpacity:0.6,
strokeWeight:7
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script
src="https://www.googleapis.com/blogger/v3/blogs/884353949349844556/posts?callback=handleResponse&key=AIzaSyAJO5J-pRCaGOIeRLIJfvAPwxpMLKvwebU">
</script>
</body>
</html>
Anybody knows what the problem could be?
Thank you in advance for your help!!!
Cheers,
Nicolas
I looked at your page, and it looked like you have two maps, one on top of the other.
Looking at the source, you do indeed have two javascripts that initialize maps.
Interestingly, they're both named "initialize" - not sure why you don't just get an error on that.
I'm guessing that if you remove the extra javascript, it will work properly.

Categories

Resources