I wondered if anyone has managed to get Google maps working within a Django project and if so, could they tell me what I may be doing wrong.
In base.html, I have the following scripts at the end of the body in base.html :
<script src="{% static '/js/script.js' %}" ></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src=https://maps.googleapis.com/maps/api/js?key=”API_KEY”&callback=initMap"></script>
<script src="{% static '/js/maps.js' %}" ></script>
Script.js is working fine and map.js is executing but after map.js runs the div element doesn’t display.
In maps.js, I have:
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
//zoom: 3,
zoom: 10,
center: {
lat: 46.619261, lng: -33.134766
}
});
var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var locations = [
{ lat: 40.785091, lng: -73.968285},
{ lat: 41.084045, lng: -73.874245},
{ lat: 40.754932, lng: -73.984016}
];
var markers = locations.map(function(location, i){
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer( map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' } );
}
I do not seem to have any Google API key issues. However I have a div in the index.html with the following element and the map is not being displayed:
<div class="row">
<!-- Map -->
<div id="map" class="col-12"></div>
<div class="col-12 mt-2 request-page">
<h2>Map Will Go Above Here </h2>
</div>
</div>
I can get the map to display if I load static in index.html and place the scripts in index.html but ideally I think I am meant to do this in base.html.
I have not changed settings.py, views.py or urls.py to accommodate Google maps, is that where my error is?
Thanks in advance.
if there is a blank gap create a CSS file and add#map {height:500px;width: 100%;}
do not forget to link it to html.
This is probably because the div element #map does not have a defined height. Try adding style="height: 300px" to it.
Related
I try to extend my custom User model as described here.
This works fine for the shown fields like ModelChoiceField and CharField.
My goal now is to add a RTF field (the control like the one shown in the Page model). I have looked through the source code of wagtail and found the method get_rich_text_editor_widget which is being used in conjunction with a CharField. Sadly I get a JavaScript error:
Uncaught TypeError: Cannot read property 'initEditor' of undefined
My guess now is that I somehow need to include or modify a hook for the widget. Or is it sufficient to override the JavaScript block in a template? It feels a bit hacky right now and I am stuck with including the required JS, that's why I am posting the question. Maybe I am missing something trivial.
# ...
from wagtail.admin.rich_text import get_rich_text_editor_widget
class CustomUserEditForm(UserEditForm):
position = forms.ModelChoiceField(queryset=Position.objects, required=True, label=_('Position'))
# biography = forms.Textarea()
biography = forms.CharField(widget=get_rich_text_editor_widget())
Update:
Updating my template (maybe not the right approach):
{% block js %}
{{ block.super }}
<script type="text/javascript" src="/static/wagtailadmin/js/draftail.js"></script>
{% endblock js %}
Results in:
I've written my solution up as an issue for draftail
https://github.com/springload/draftail/issues/450
I've got a wagtail site with this awesome RichText Editor (called Draftail) but trying to use it on a non Wagtail Admin page makes me feel dirty. I wanted a biography field that people could write about themselves and I wanted the blog authors to be able to use it as well. BUT to do that I've had to do some things that make me cringe.
Not bad:
{% block extra_css %}
<link href="{% static 'wagtailadmin/css/panels/draftail.css' %}" type="text/css" media="all" rel="stylesheet">
{% endblock extra_css %}
WTF???? why aren't we just using Favicons for things like Bold
<div data-sprite></div>
<script>
function loadIconSprite() {
var spriteURL = '{% url "wagtailadmin_sprite" %}';
var revisionKey = 'wagtail:spriteRevision';
var dataKey = 'wagtail:spriteData';
var isLocalStorage = 'localStorage' in window && typeof window.localStorage !== 'undefined';
var insertIt = function (data) {
var spriteContainer = document.body.querySelector('[data-sprite]');
spriteContainer.innerHTML = data;
}
var insert = function (data) {
if (document.body) {
insertIt(data)
} else {
document.addEventListener('DOMContentLoaded', insertIt.bind(null, data));
}
}
if (isLocalStorage && localStorage.getItem(revisionKey) === spriteURL) {
var data = localStorage.getItem(dataKey);
if (data) {
insert(data);
return true;
}
}
try {
var request = new XMLHttpRequest();
request.open('GET', spriteURL, true);
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
data = request.responseText;
insert(data);
if (isLocalStorage) {
localStorage.setItem(dataKey, data);
localStorage.setItem(revisionKey, spriteURL);
}
}
}
request.send();
} catch (e) {
console.error(e);
}
}
loadIconSprite();
</script>
Because wagtail comments.js somehow needs wagtailConfig.ADMIN_API and draftail won't initialize without comments.js
<script>
(function(document, window) {
window.wagtailConfig = window.wagtailConfig || {};
wagtailConfig.ADMIN_API = {
PAGES: '',
DOCUMENTS: '',
IMAGES: '',
{# // Use this to add an extra query string on all API requests. #}
{# // Example value: '&order=-id' #}
EXTRA_CHILDREN_PARAMETERS: '',
};
{% i18n_enabled as i18n_enabled %}
{% locales as locales %}
wagtailConfig.I18N_ENABLED = {% if i18n_enabled %}true{% else %}false{% endif %};
wagtailConfig.LOCALES = {{ locales|safe }};
wagtailConfig.STRINGS = {% js_translation_strings %};
wagtailConfig.ADMIN_URLS = {
PAGES: ''
};
})(document, window);
</script>
<script src="{% static 'wagtailadmin/js/vendor/jquery-3.5.1.min.js' %}"></script>
<!-- <script src="{% static 'wagtailadmin/js/core.js' %}"></script> strangely not needed -->
<script src="{% static 'wagtailadmin/js/vendor.js' %}"></script>
<script src="{% static 'wagtailadmin/js/comments.js' %}"></script>
{{ form.media.js }}
All of this just to get the draftail editor on a non wagtail admin page!
I am using Datamaps to create a map of Canada and USA. I saw the tutorial and/or examples in its website and I saw a "USA map only" example. And I did that:
<script>
var addUSA = new Datamap({
scope: 'usa',
element: document.getElementById('usa-map'),
geographyConfig: {
highlightOnHover: false,
borderColor: '#006298',
borderWidth: 0.8,
popupTemplate: function(geography, data) {
return "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
}
},
dataUrl: 'data.json',
dataType: 'json',
data: {},
fills: {
defaultFill: '#FFFFFF'
}
});
addUSA.labels();
</script>
So I assume that you can also create a "Canada map only". But the problem is, I don't know how to combine two countries.
I aim for labels, the hover-info and json that's why I'm using Datamaps.
So I've found this URL entitled Custom Map Data in Datamaps by Mark DiMarco and I used and tried copying what he had done. On that link, he created a map of Afghanistan which was not included in his main examples on Datamaps website. But instead of one country, we will combine two countries custom map using Datamaps. This is an experiment I've made but I hope this will be the answer to your problem
First, he created a custom topo json for Afghanistan. He published a tutorial on how to create custom map data but I think I don't have an access 'cause I'm getting 404 or he took it down. Going back, the code he used for that custom topo json can also be found in his other works located at "More Versions" link in Datamaps website. You just need to look for the country/ies you need to make a custom topo json. On your end, look for datamaps.afg.js and datamaps.usa.js; and get the json.
I only have 1 reputation and I am limit with two URLs. Just visit this GitHub site where I put those two custom topo json for Canada and USA.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Canada and USA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.none.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- CANADA -->
<h1>CANADA</h1>
<div id="canada"></div>
<!-- USA -->
<h1>USA</h1>
<div id="usa"></div>
</body>
</html>
CSS
#canada {
border: 1px solid #000000;
height: 450px;
width: 400px;
}
#usa {
border: 2px solid #EDA552;
height: 400px;
width: 500px;
}
JQUERY
$(function() {
var canadaMap = new Datamap({
element: document.getElementById('canada'),
geographyConfig: {
dataUrl: 'canada.topo.json'
},
scope: 'canada',
fills: {
defaultFill: '#bada55'
},
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([-95, 71])
.scale(200)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path().projection(projection);
return {path: path, projection: projection};
}
});
var USAmap = new Datamap({
element: document.getElementById('usa'),
geographyConfig: {
dataUrl: 'usa.topo.json'
},
scope: 'usa',
fills: {
defaultFill: '#bada55'
},
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([-120, 54])
.scale(250)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path().projection(projection);
return {path: path, projection: projection};
}
});
});
Working code here => JS FIDDLE
I have my app using gmaps4rails working for a while after Google moved to GIT.
Here is what I am using in the application.htm.erb
<script src="https://maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
And in the Gemfile I have these lines
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
In the application.js I have this line
//= require gmaps/google
Here is the page supposed to render the map.
<div class="row-fluid">
<div id="map" style='width: 100%; height: 500px; border: 1px solid black;'></div>
</div>
<script type="text/javascript">
buildMap (<%=raw #hash.to_json %>);
</script>
And the associated coffee script is
class RichMarkerBuilder extends Gmaps.Google.Builders.Marker #inherit from builtin builder
#override create_marker method
create_marker: ->
options = _.extend #marker_options(), #rich_marker_options()
#serviceObject = new RichMarker options #assign marker to #serviceObject
rich_marker_options: ->
marker = document.createElement("div")
marker.setAttribute 'class', 'marker_container'
marker.innerHTML = #args.title
_.extend(#marker_options(), { content: marker })
infobox: (boxText)->
content: boxText
pixelOffset: new google.maps.Size(-140, 0)
boxStyle:
width: "400px"
# override method
create_infowindow: ->
return null unless _.isString #args.infowindow
boxText = document.createElement("div")
boxText.setAttribute("class", 'marker_info_box') #to customize
boxText.innerHTML = #args.infowindow
#infowindow = new InfoBox(#infobox(boxText))
#buildMap = (markers)->
handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} } #dependency injection
#then standard use
handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
markers = handler.addMarkers(markers)
handler.bounds.extendWith(markers)
handler.fitMapToBounds()
None of this code was recently changed (in the last week or so).
I only executed a bundle update today that upgraded the gems jbuilder from 2.4.1 to 2.5.0 and autoprefixer from 6.3.6.1 to 6.3.6.2.
The app was working having the map rendered until now when the map is not shown anymore.
I reverted these two gems to the previous versions but still no map rendered.
Don't know how to make it working again?
I just changed the order of the scripts to be loaded and now the map is rendered again, here is the code:
<script src="//maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
Problem solved.
I am trying to introduce Angular in my Django app. I doubt, that my problem is directly correlated with interpolateProvider which is needed because of django templates... but who knows.
I also have a problem with simplified version of that: http://jsfiddle.net/33417xsm/
This is my current version:
<html ng-app="MyApp">
<head>
<script type="text/javascript" src="/static/js/libs/angular/angular.js"></script>
<script type="text/javascript" src="/static/js/app/app.js"></script>
</head>
<body>
<div ng-controller="MyAppController">
[[ 2 + 4 ]]
<p>[[ MyAppController.product.title ]]</p>
</div>
</body>
</html>
file: app.js
(function(){
var app = angular.module('MyApp', []);
app.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}
);
app.controller('MyAppController', function (){
this.product = gem;
});
var gem = {
'title': 'Inferno'
};
})();
My result:
As you can guess, I want to also display Inferno. What I am doing wrong?
Your app config is ok. But i see, you didn't understand clearly angular concept.
You must use $scope to binding data. Also you never need "myController.product" like this notation.
I updated your code http://jsfiddle.net/33417xsm/4/
<div ng-app="MyApp" ng-controller="MyAppController">
{{ 2 + 4 }}
<p>{{product.title}}</p>
</div>
var app = angular.module('MyApp', []);
app.controller('MyAppController', function ($scope){
$scope.product = {"title":"product title"};
});
<script type="text/javascript">
document.getElementById("IDOFELEMENT");
</script>
What is the correct way to turn this into a link?
Can I write
<script type="text/javascript">
document.getElementById("IDOFELEMENT").href("http://www.address.com");
</script>
Many thanks.
javascript:
// this changes the href value<br>
document.getElementById("IDOFELEMENT").href = "http://www.address.com";
and the html:
<a href="www.toBeChanged.com" id="IDOFELEMENT">To Website< /a>
You should specify what kind of element is IDOFELEMENT. But you can't convert it to a link by just adding a href attribute, it only works if IDOFELEMENT
is an hyperlink like <a id="IDOFELEMENT">stuff</a>
Simplest way is to add an onclick event to the element that changes the url to desired address:
<script type="text/javascript">
var element = document.getElementById("IDOFELEMENT");
element.setAttribute('onclick', 'window.location.href=\'http://address.com\'');
</script>
Or if you wanna wrap it with a hyperlink:
<script type="text/javascript">
var element = document.getElementById("IDOFELEMENT");
var parent = element.parentNode;
var link = document.createElement('a');
link.href = 'http://www.address.com';
link.appendChild(element.cloneNode(true));
parent.replaceChild(link, element);
</script>
I hope this helps you.
I came accross the issue - Javascript error: Cannot read property 'parentNode' of null.
I discovered this was due to executing this code while the DOM is not ready.
window.onload solved the issue for me.
<script>
window.onload = function() {
var element = document.getElementById("IDOFELEMENT");
var parent = element.parentNode;
var link = document.createElement('a');
link.href = 'http://www.google.com';
link.appendChild(element.cloneNode(true));
parent.replaceChild(link, element);
};
</script>
You just need to wrap your element in an anchor tag as follows...
<a href="http://www.address.com">
<div id="IDOFELEMENT">
... content ...
</div>
</a>