Googlemaps & Charts.js show Chart in Infowindow (html & js)
Introduction:
In school im currently working on a project with the Googleappengine, Googledatastore, Googlemaps and Chart.js. While Building the Basic Gui for my application i've encountered a Problem, were i need your help to unterstand why that happens and maybe some tipps for a fix or workaround.
The Project:
Build a realistic java temperaturesimulator with spots around the world. Send the data wia http to the appengine and store it in the datastore. Build a webpage to show off a temperaturemap with your stored data in Googlemaps with charts.
The Problem:
After loading the page on the first click on a marker, only the canvas of the html loads and i get an "SCRIPT5007: Unable to get property 'getContext' of undefined or null reference" error. On the second click on a marker everything works a intended. After that i can close and open the markers infowindow as i like without Problems.
The Site:
http://1-dot-mm-gae-ntb.appspot.com/Temperaturemap.html
The Code:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
var infowindow = new google.maps.InfoWindow({
content: '<canvas id="myChart" width="400" height="400"></canvas>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
var ctx = document.getElementById('myChart').getContext('2d');
// alert (ctx);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'hours slept',
data: [6.5, 5, 7, 7.5, 9, 10, 6],
backgroundColor: "rgba(153,255,51,0.4)",
}]
}
});
});
}html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#Banner {
width: 100%;
height: 14.5%;
}
#MenuButton {
background-color: #9b9b9b;
border: 1px solid #2b2b2b;
color: #050505;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
#MenuButton:hover {
background-color: #4d8b8e;
}
#MenuButton:not(:last-child) {
border-right: none; /* Prevent double borders */
}
#map {
width: 100%;
height: 80%;
}<!DOCTYPE html>
<html>
<head>
<title>mm.ike@ntb</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Temperaturemap.css">
<script src="Chart.bundle.js"></script>
<script src="Temperaturemap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWLd8nI-RsYVKVpLmZGdrgiYjjS-T5QCc"></script>
</head>
<body onload=initMap()>
<img id="Banner" src="NTBHeader.jpg" align="center">
<div id="Menu" class="btn-group">
<input type="button" value="Projectinfos" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Projectinfos.html'">
<input type="button" value="Temperaturemap" id="MenuButton" style="width: 50%;" onclick="window.location.href='/Temperaturemap.html'">
<input type="button" value="Impresseum" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Impresseum.html'">
</div>
<div id="map"></div>
</body>
</html>My View:
I would say, there is a problem with the loadingspeed of the initial load on the markersinfowindow. The Chart.js tries to write the chart into the canvas bevore even the markerinfowindow knows thats there a canvas in it. But until 1 month ago i never really worked with html and js, this is my first contact with maps, appengine, chart and datastore, so i really know nothing (John Snow).
Thank you in Advance:
Im looking forwards to hear some explanations from some people with better experiance than me.
javascript html canvas
asked Nov 16 '18 at 9:32
mm.ike
62
add a comment |
Introduction:
In school im currently working on a project with the Googleappengine, Googledatastore, Googlemaps and Chart.js. While Building the Basic Gui for my application i've encountered a Problem, were i need your help to unterstand why that happens and maybe some tipps for a fix or workaround.
The Project:
Build a realistic java temperaturesimulator with spots around the world. Send the data wia http to the appengine and store it in the datastore. Build a webpage to show off a temperaturemap with your stored data in Googlemaps with charts.
The Problem:
After loading the page on the first click on a marker, only the canvas of the html loads and i get an "SCRIPT5007: Unable to get property 'getContext' of undefined or null reference" error. On the second click on a marker everything works a intended. After that i can close and open the markers infowindow as i like without Problems.
The Site:
http://1-dot-mm-gae-ntb.appspot.com/Temperaturemap.html
The Code:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
var infowindow = new google.maps.InfoWindow({
content: '<canvas id="myChart" width="400" height="400"></canvas>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
var ctx = document.getElementById('myChart').getContext('2d');
// alert (ctx);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'hours slept',
data: [6.5, 5, 7, 7.5, 9, 10, 6],
backgroundColor: "rgba(153,255,51,0.4)",
}]
}
});
});
}html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#Banner {
width: 100%;
height: 14.5%;
}
#MenuButton {
background-color: #9b9b9b;
border: 1px solid #2b2b2b;
color: #050505;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
#MenuButton:hover {
background-color: #4d8b8e;
}
#MenuButton:not(:last-child) {
border-right: none; /* Prevent double borders */
}
#map {
width: 100%;
height: 80%;
}<!DOCTYPE html>
<html>
<head>
<title>mm.ike@ntb</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Temperaturemap.css">
<script src="Chart.bundle.js"></script>
<script src="Temperaturemap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWLd8nI-RsYVKVpLmZGdrgiYjjS-T5QCc"></script>
</head>
<body onload=initMap()>
<img id="Banner" src="NTBHeader.jpg" align="center">
<div id="Menu" class="btn-group">
<input type="button" value="Projectinfos" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Projectinfos.html'">
<input type="button" value="Temperaturemap" id="MenuButton" style="width: 50%;" onclick="window.location.href='/Temperaturemap.html'">
<input type="button" value="Impresseum" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Impresseum.html'">
</div>
<div id="map"></div>
</body>
</html>My View:
I would say, there is a problem with the loadingspeed of the initial load on the markersinfowindow. The Chart.js tries to write the chart into the canvas bevore even the markerinfowindow knows thats there a canvas in it. But until 1 month ago i never really worked with html and js, this is my first contact with maps, appengine, chart and datastore, so i really know nothing (John Snow).
Thank you in Advance:
Im looking forwards to hear some explanations from some people with better experiance than me.
javascript html canvas
asked Nov 16 '18 at 9:32
mm.ike
62
add a comment |
Introduction:
In school im currently working on a project with the Googleappengine, Googledatastore, Googlemaps and Chart.js. While Building the Basic Gui for my application i've encountered a Problem, were i need your help to unterstand why that happens and maybe some tipps for a fix or workaround.
The Project:
Build a realistic java temperaturesimulator with spots around the world. Send the data wia http to the appengine and store it in the datastore. Build a webpage to show off a temperaturemap with your stored data in Googlemaps with charts.
The Problem:
After loading the page on the first click on a marker, only the canvas of the html loads and i get an "SCRIPT5007: Unable to get property 'getContext' of undefined or null reference" error. On the second click on a marker everything works a intended. After that i can close and open the markers infowindow as i like without Problems.
The Site:
http://1-dot-mm-gae-ntb.appspot.com/Temperaturemap.html
The Code:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
var infowindow = new google.maps.InfoWindow({
content: '<canvas id="myChart" width="400" height="400"></canvas>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
var ctx = document.getElementById('myChart').getContext('2d');
// alert (ctx);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'hours slept',
data: [6.5, 5, 7, 7.5, 9, 10, 6],
backgroundColor: "rgba(153,255,51,0.4)",
}]
}
});
});
}html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#Banner {
width: 100%;
height: 14.5%;
}
#MenuButton {
background-color: #9b9b9b;
border: 1px solid #2b2b2b;
color: #050505;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
#MenuButton:hover {
background-color: #4d8b8e;
}
#MenuButton:not(:last-child) {
border-right: none; /* Prevent double borders */
}
#map {
width: 100%;
height: 80%;
}<!DOCTYPE html>
<html>
<head>
<title>mm.ike@ntb</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Temperaturemap.css">
<script src="Chart.bundle.js"></script>
<script src="Temperaturemap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWLd8nI-RsYVKVpLmZGdrgiYjjS-T5QCc"></script>
</head>
<body onload=initMap()>
<img id="Banner" src="NTBHeader.jpg" align="center">
<div id="Menu" class="btn-group">
<input type="button" value="Projectinfos" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Projectinfos.html'">
<input type="button" value="Temperaturemap" id="MenuButton" style="width: 50%;" onclick="window.location.href='/Temperaturemap.html'">
<input type="button" value="Impresseum" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Impresseum.html'">
</div>
<div id="map"></div>
</body>
</html>My View:
I would say, there is a problem with the loadingspeed of the initial load on the markersinfowindow. The Chart.js tries to write the chart into the canvas bevore even the markerinfowindow knows thats there a canvas in it. But until 1 month ago i never really worked with html and js, this is my first contact with maps, appengine, chart and datastore, so i really know nothing (John Snow).
Thank you in Advance:
Im looking forwards to hear some explanations from some people with better experiance than me.
javascript html canvas
asked Nov 16 '18 at 9:32
mm.ike
62
Introduction:
In school im currently working on a project with the Googleappengine, Googledatastore, Googlemaps and Chart.js. While Building the Basic Gui for my application i've encountered a Problem, were i need your help to unterstand why that happens and maybe some tipps for a fix or workaround.
The Project:
Build a realistic java temperaturesimulator with spots around the world. Send the data wia http to the appengine and store it in the datastore. Build a webpage to show off a temperaturemap with your stored data in Googlemaps with charts.
The Problem:
After loading the page on the first click on a marker, only the canvas of the html loads and i get an "SCRIPT5007: Unable to get property 'getContext' of undefined or null reference" error. On the second click on a marker everything works a intended. After that i can close and open the markers infowindow as i like without Problems.
The Site:
http://1-dot-mm-gae-ntb.appspot.com/Temperaturemap.html
The Code:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
var infowindow = new google.maps.InfoWindow({
content: '<canvas id="myChart" width="400" height="400"></canvas>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
var ctx = document.getElementById('myChart').getContext('2d');
// alert (ctx);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'hours slept',
data: [6.5, 5, 7, 7.5, 9, 10, 6],
backgroundColor: "rgba(153,255,51,0.4)",
}]
}
});
});
}html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#Banner {
width: 100%;
height: 14.5%;
}
#MenuButton {
background-color: #9b9b9b;
border: 1px solid #2b2b2b;
color: #050505;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
#MenuButton:hover {
background-color: #4d8b8e;
}
#MenuButton:not(:last-child) {
border-right: none; /* Prevent double borders */
}
#map {
width: 100%;
height: 80%;
}<!DOCTYPE html>
<html>
<head>
<title>mm.ike@ntb</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Temperaturemap.css">
<script src="Chart.bundle.js"></script>
<script src="Temperaturemap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWLd8nI-RsYVKVpLmZGdrgiYjjS-T5QCc"></script>
</head>
<body onload=initMap()>
<img id="Banner" src="NTBHeader.jpg" align="center">
<div id="Menu" class="btn-group">
<input type="button" value="Projectinfos" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Projectinfos.html'">
<input type="button" value="Temperaturemap" id="MenuButton" style="width: 50%;" onclick="window.location.href='/Temperaturemap.html'">
<input type="button" value="Impresseum" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Impresseum.html'">
</div>
<div id="map"></div>
</body>
</html>My View:
I would say, there is a problem with the loadingspeed of the initial load on the markersinfowindow. The Chart.js tries to write the chart into the canvas bevore even the markerinfowindow knows thats there a canvas in it. But until 1 month ago i never really worked with html and js, this is my first contact with maps, appengine, chart and datastore, so i really know nothing (John Snow).
Thank you in Advance:
Im looking forwards to hear some explanations from some people with better experiance than me.
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
var infowindow = new google.maps.InfoWindow({
content: '<canvas id="myChart" width="400" height="400"></canvas>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
var ctx = document.getElementById('myChart').getContext('2d');
// alert (ctx);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'hours slept',
data: [6.5, 5, 7, 7.5, 9, 10, 6],
backgroundColor: "rgba(153,255,51,0.4)",
}]
}
});
});
}html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#Banner {
width: 100%;
height: 14.5%;
}
#MenuButton {
background-color: #9b9b9b;
border: 1px solid #2b2b2b;
color: #050505;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
#MenuButton:hover {
background-color: #4d8b8e;
}
#MenuButton:not(:last-child) {
border-right: none; /* Prevent double borders */
}
#map {
width: 100%;
height: 80%;
}<!DOCTYPE html>
<html>
<head>
<title>mm.ike@ntb</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Temperaturemap.css">
<script src="Chart.bundle.js"></script>
<script src="Temperaturemap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWLd8nI-RsYVKVpLmZGdrgiYjjS-T5QCc"></script>
</head>
<body onload=initMap()>
<img id="Banner" src="NTBHeader.jpg" align="center">
<div id="Menu" class="btn-group">
<input type="button" value="Projectinfos" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Projectinfos.html'">
<input type="button" value="Temperaturemap" id="MenuButton" style="width: 50%;" onclick="window.location.href='/Temperaturemap.html'">
<input type="button" value="Impresseum" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Impresseum.html'">
</div>
<div id="map"></div>
</body>
</html>function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
var infowindow = new google.maps.InfoWindow({
content: '<canvas id="myChart" width="400" height="400"></canvas>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
var ctx = document.getElementById('myChart').getContext('2d');
// alert (ctx);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'hours slept',
data: [6.5, 5, 7, 7.5, 9, 10, 6],
backgroundColor: "rgba(153,255,51,0.4)",
}]
}
});
});
}html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#Banner {
width: 100%;
height: 14.5%;
}
#MenuButton {
background-color: #9b9b9b;
border: 1px solid #2b2b2b;
color: #050505;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
#MenuButton:hover {
background-color: #4d8b8e;
}
#MenuButton:not(:last-child) {
border-right: none; /* Prevent double borders */
}
#map {
width: 100%;
height: 80%;
}<!DOCTYPE html>
<html>
<head>
<title>mm.ike@ntb</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Temperaturemap.css">
<script src="Chart.bundle.js"></script>
<script src="Temperaturemap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWLd8nI-RsYVKVpLmZGdrgiYjjS-T5QCc"></script>
</head>
<body onload=initMap()>
<img id="Banner" src="NTBHeader.jpg" align="center">
<div id="Menu" class="btn-group">
<input type="button" value="Projectinfos" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Projectinfos.html'">
<input type="button" value="Temperaturemap" id="MenuButton" style="width: 50%;" onclick="window.location.href='/Temperaturemap.html'">
<input type="button" value="Impresseum" id="MenuButton" style="width: 25%;" onclick="window.location.href='/Impresseum.html'">
</div>
<div id="map"></div>
</body>
</html>javascript html canvas
javascript html canvas
asked Nov 16 '18 at 9:32
mm.ike
62
asked Nov 16 '18 at 9:32
mm.ike
62
edited Nov 21 '18 at 14:49
asked Nov 16 '18 at 9:32
mm.ike
62
asked Nov 16 '18 at 9:32
mm.ike
62
asked Nov 16 '18 at 9:32
mm.ike
62
62
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334979%2fgooglemaps-charts-js-show-chart-in-infowindow-html-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334979%2fgooglemaps-charts-js-show-chart-in-infowindow-html-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
