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.
Related
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)
[EDIT] it seems the problem comes from google maps which takes some time to update the KML link...I'm not sure, but in the end, it works...[/EDIT]
I embedded an existing public google map on this website : http://www.ridetheflavour.fr
Here is the link of the public map : https://maps.google.fr/maps/ms?msa=0&msid=211027213468691902621.0004c8616605648d245b2
As you can see, the markers of the website's embedded map don't match the public google map markers. It seems it's not a matter of browser cache...
Here is the javascript snippet i'm using (Google map API V3) :
var mapOptions = {
center: new google.maps.LatLng(24.797409,-5.449219),
zoom: 3,
mapTypeId: google.maps.MapTypeId.TERRAIN,
overviewMapControl: false,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var georssLayer = new google.maps.KmlLayer('https://maps.google.fr/maps/ms?ie=UTF8&authuser=0&msa=0&output=kml&msid=211027213468691902621.0004c8616605648d245b2');
georssLayer.setMap(map);
Any help would be greatly appreciated.
Google's servers cache the KML content for some period of time. To force the rendered KML to update, add a cache busting parameter to the URL. I usually use a function of the date/time if I need to do it programmatically, or if it is just a one time edit a manual ?a=0 and incrementing that as I make changes works.
Something like this (if you don't have any other query parameters in the URL):
var URL = filename+"?dummy="+(new Date()).getTime();
Or you can simplify it even further and use:
var URL = '[your kml url here]&ver=' + Date.now();
var georssLayer = new google.maps.KmlLayer(URL);
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/
I'm currently trying to use google maps to first display a map of United States with the weather and cloud google map layers and then zoom into the user's location using geolocation google maps api. My problem right now is I am only able to display the map without any of the weather, cloud, or geolocation information and only using the iframe basic view mode maps api. I am fairly new to javascript but have a div with an id "map-canvas" in my body tags and a javascript file mapWeather.js in my head tags.
mapWeather.js:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.6,-95.665)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
You probably already know, but do note that this library has been deprecated and will stop working in June.
I have created a Google Map API and I would like to open it in a new tab(Window). May I know what's wrong with my code? I can open a new tab, but I can't display the Google Map.
Below are my code. Thanks!
function newWindow()
{
var myLatlng = new google.maps.LatLng(0.7,40);
var myOptions =
{
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
<A HREF="" onclick="window.open('javascript:newWindow()')" >New Map(In new window)</A>
window.open() takes a URL as a parameter. Your newWindow() function does not return anything, let alone a URL.
You need to call window.open() with a valid URL passed in, which takes care of setting up the map itself.
If you're going to attach an event handler inline, do it right:
<a onclick="window.open('some_url_here'); return false;">...</a>.
That said, in the interest of unobtrusive JavaScript, you should really attach JS event handlers using your external JS code.
Perhaps you want to open your map in a modal dialog instead?
the variable for window.open is the url
New Map(In new window)
There is actually a solution for your problem. The first error here is that the context in new window is different from the old window.
var w = window.open('', '_blank', options);
w is a Window object different from the window. Empty URL create an empty page "about:blank", and since there is no domain, you have read/write access to w.document.
So something like this:
function newWindowMap(latitude, longitude) {
var w = window.open('', '_blank'); //you must use predefined window name here for IE.
var head = w.document.getElementsByTagName('head')[0];
//Give some information about the map:
w.document.createElement('input');
//Place ID, value and type='hidden' here
var loadScript = w.document.createElement('script');
loadScript.src = '...'; //Link to script that load google maps from hidden elements.
var googleMapScript = w.document.createElement('script');
googleMapScript.src = '...'; //Link to google maps js, use callback=... URL parameter to setup the calling function after google maps load.
head.appendChild(loadScript);
head.appendChild(googleMapScript);
}
Now the whole loadScript will be in context of the new window and google map will call a function from it, when it finished loading. You can create new div dynamically and use it to create a map.