I'm implementing an asp.net core project. I have written a few queries in Home controller that their output are used for some charts in its relevant view. When I just show a chart with its related query, it works fine and the page shows the chart but when I want to show 4 charts using bootstrap with its related query it doesn't show anything. I appreciate if anyone tells me what is the problem.
#using System.Linq;
#model CSDDashboard.TempClasses.ChartListObjects
#{
var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.TotalReqStatus.Select(i => i.DimensionOne).ToList());
var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.TotalReqStatus.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Pie Chart";
}
#{
var XLabels1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedTimeAvg.Select(i => i.DimensionOne).ToList());
var YValues1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedTimeAvg.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Line Chart";
}
#{
var XLabels2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedPercent.Select(i => i.DimensionOne).ToList());
var YValues2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedPercent.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Line Chart";
}
#{
var XLabels3 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedApiToApplicantAvg.Select(i => i.DimensionOne).ToList());
var YValues3 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedApiToApplicantAvg.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Line Chart";
}
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body, h1, h2, h3, h4, h5 {
font-family: "Raleway", sans-serif
}
</style>
<head>
<meta name="viewport" content="width=device-width" />
<title>Charts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<!-- cell 1 -->
<div class="w3-quarter">
<div class="w3-container w3-red w3-padding-16">
<div class="w3-left"><i class="fa fa-comment w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>#ViewBag.TotalApplicationCount</h3>
</div>
<div class="w3-clear"></div>
<h4>Applications Count </h4>
</div>
</div>
</div>
<div class="col">
<div class="w3-quarter">
<div class="w3-container w3-blue w3-padding-16">
<div class="w3-left"><i class="fa fa-eye w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>#ViewBag.TotalApplicantCount</h3>
</div>
<div class="w3-clear"></div>
<h4>Total Applicant Count</h4>
</div>
</div>
<!-- cell 2 -->
</div>
<div class="col">
<div class="w3-quarter">
<div class="w3-container w3-teal w3-padding-16">
<div class="w3-left"><i class="fa fa-share-alt w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>#ViewBag.grantedCount</h3>
</div>
<div class="w3-clear"></div>
<h4>Granted Application</h4>
</div>
</div>
<!-- cell 3 -->
</div>
<div class="col-5" >#*style="width:30%">*#
<!-- pie chart -->
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: #Html.Raw(XLabels),
datasets: [{
label: "Drinks Chart",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: #Html.Raw(YValues)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'pie'
});
});
</script>
<!--cell 4 row 1-->
</div>
</div>
<div class="row">
<div class="col">
<!-- line chart -->
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: #Html.Raw(XLabels1),
datasets: [{
label: "Countries Chart",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: #Html.Raw(YValues1)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'line'
});
});
</script>
<!--cell 1 row 2-->
</div>
<div class="col">
<!-- line chart -->
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: #Html.Raw(XLabels2),
datasets: [{
label: "Countries Chart",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: #Html.Raw(YValues2)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'line'
});
});
</script>
<!--cell2 row 2-->
</div>
<div class="col">
<!-- line chart -->
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: #Html.Raw(XLabels3),
datasets: [{
label: "Countries Chart",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: #Html.Raw(YValues3)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'line'
});
});
</script>
<!--cell3 row3-->
</div>
</div>
</div>
</body>
</html>
Related
I am using chart.js for the first time for my project and when I passed my labels into the chart.js component, instead of taking strings like "sunday" and "monday" as labels, it takes "s" , "u", "n" ,"d" etc. How to fix this issue:
Code for the bar chart:
<template>
<canvas :id="`myChart${id}`"></canvas>
</template>
<script>
import Chart from 'chart.js/auto';
export default {
name: 'AnalysisBarChart',
props: ['id', 'labels'],
mounted() {
const ctx = document.getElementById('myChart' + this.id).getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: this.labels,
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: this.id,
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
});
myChart;
},
};
</script>
<style></style>
And I pass these labels:
labels: ['sunday', 'monday'],
How to fix this issue?
This behaviour only appears when you provide your labels array as a string instead of an array. So your labels array is not an array as you say it is but instead it is a string that looks like an array.
So you will need to convert that strong back to an array and then it will work as expected
I try to position 2 vertical lines which are my thresholds for list of results for some tests.
My problem is that when I try to take value which is not part of the results, The lines are not shown.
With the following code I see the lines.
<script>
import BarChart from "#/components/TestsStatictics/BarChart.vue";
export default {
components: {
BarChart,
},
data() {
return {
chartData: {
labels: [24.35, 24, 24.2, 24.28],
datasets: [
{
label: "Bar Chart",
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(75, 192, 192, 0.2)",
],
borderColor: [
"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(75, 192, 192, 0.2)",
],
pointBorderColor: "#2554FF",
data: [24.35, 24, 24.2, 24.28],
},
],
},
options: {
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 24.35,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "22.70",
},
},
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 24.28,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "25.70",
},
},
],
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
gridLines: {
display: true,
},
},
],
xAxes: [
{
gridLines: {
display: false,
},
barThickness: 30,
},
],
},
legend: {
display: true,
},
responsive: true,
maintainAspectRatio: false,
},
};
},
};
</script>
but if I change the part of the annotation to this (the value of the annotation is not within the data and labels values), It doesn`t work:
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 22,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "22",
},
},
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 26,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "26",
},
},
],
Try setting max an min values for the axes:
suggestedMax, suggestedMin
scales: {
xAxes: [
{
gridLines: {
display: false,
},
ticks: {
suggestedMax: 35,
suggestedMin: 20
},
barThickness: 30,
},
],
My radar's tooltips is show "labels" but I want radar's tooltips show "data"
I refer to the method of chart.js official website but still can't display it correctly
My Radar chart
Chart.js official website Radar chart
My code version
"dependencies": {
"chart.js": "^2.9.3",
"chartkick": "^3.2.0",
"core-js": "^3.3.2",
"hchs-vue-charts": "^1.2.8",
"vue": "^2.6.10",
"vue-chartjs": "^3.5.0",
"vue-chartkick": "^0.6.0",
"vue-router": "^3.1.3",
"vuetify": "^2.1.0"
}
My code
<script>
import { Radar } from "vue-chartjs";
export default {
extends: Radar,
data() {
return {
datacollection: {
labels: [
"Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"
],
datasets: [
{
label: "My First Dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second Dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}]},
options: {
scale: {
angleLines: {
display: false
},
ticks: {
suggestedMin: 50,
suggestedMax: 100
}}}};},
mounted() {
this.renderChart(this.datacollection, this.options);
}};
</script>
You can add the tooltips option with a callback function that returns the title as follows:
"options": {
...
"tooltips": {
"callbacks": {
"title": (tooltipItem, data) => data.labels[tooltipItem[0].index]
}
}
}
Please have a look at the following JavaScript code snippet. Adding the tooltips option to your existing Vue.js code should work the same.
new Chart(document.getElementById("myChart"), {
"type": "radar",
"data": {
"labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
}, {
"label": "My Second Dataset",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)"
}]
},
"options": {
"elements": {
"line": {
"tension": 0,
"borderWidth": 3
}
},
"tooltips": {
"callbacks": {
"title": (tooltipItem, data) => data.labels[tooltipItem[0].index]
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
I want to to render the JSON values from an API using vue and vue-chartjs. The bar-chart instead of looping through the array and plot the complete array, shows just the first two results (dc:title and dc:identifier).
Using JQUERY I have integrated the script into my chart.vue component
<script>
import Chart from 'chart.js';
import JQuery from 'jquery'
let $ = JQuery
export default {
name: 'app',
mounted() {
var chart = this.$refs.chart;
const ctx = chart.getContext("2d");
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: '# of Metadata',
data: [],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
var getData = function() {
$.ajax({
url: 'http://localhost:3000/ratio/total',
success: function(data) {
console.log(data[0].results);
for(var key in data[0].results[0]){
myChart.data.labels.push(data[0].results[key][0]);
myChart.data.datasets[0].data.push(data[0].results[key][1]);
}
myChart.update();
}
});
};
// get new data every 3 seconds
getData();
}
}
</script>
API JSON output
[
{
"results": [
[
"dc:title",
553
],
[
"dc:identifier",
553
],
[
"dc:subject",
553
],
[
"dc:type",
553
],
[
"dc:format",
553
],
[
"dc:description",
553
],
[
"dc:language",
553
],
[
"$",
553
],
[
"dc:relation",
553
],
[
"dc:source",
532
],
[
"dc:rights",
449
],
[
"dc:date",
21
],
[
"dc:creator",
21
],
[
"dc:publisher",
21
],
[
"dc:coverage",
21
],
[
"pico:anchor",
0
],
[
"pico:preview",
0
],
[
"dcterms:rightsHolder",
0
],
[
"pico:author",
0
],
[
"pico:materialAndTechnique",
0
],
[
"dc:isReferencedBy",
0
],
[
"dcterms:isReferencedBy",
0
],
[
"dcterms:spatial",
0
],
[
"dcterms:created",
0
],
[
"pico:producer",
0
],
[
"dcterms:medium",
0
],
[
"dcterms:extent",
0
],
[
"pico:distributor",
0
],
[
"dcterms:isPartOf",
0
],
[
"dcterms:license",
0
],
[
"pico:licenseMetadata",
0
],
[
"dcterms:alternative",
0
],
[
"dcterms:modified",
0
],
[
"dcterms:hasPart",
0
],
[
"pico:contact",
0
],
[
"pico:information",
0
],
[
"pico:service",
0
],
[
"pico:responsible",
0
],
[
"pico:isManagedBy",
0
],
[
"dcterms:provenance",
0
]
]
}
]
I don't think that is a valid object first off.
"results": [["dc:title",553], should be "results": [{"dc": "title", "key": 553}]
notice the curly braces { and the key missing from the second numeric prop
check this out: https://www.w3schools.com/js/js_json_objects.asp
you can run ur json through a validator as well to make sure: https://jsonformatter.curiousconcept.com/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm new to google map.
I'm developing an application about showing cars on google map but google map has not the names(label) of most of roads in over area. I want to develop an system to allow the user to add these names on the map. positions and names will keep on database. My question is that how to add road name on the map with javascript. I can send the names and positions to a function in javascript code but I need an API to add these names on map temporary till user close the application.
You see that with increase/decrease in zoom level, road names becomes bigger or smaller or disapear. With regular marker we can not do this.
One option is to use the InfoBox
One example of that here
You can write code to change the size of the font and/or not to display the InfoBoxes depending on the zoom level (the example above only displays the infoboxes when you are zoomed in enough for it to be reasonable).
code snippet:
var geocoder = null;
var layer = null;
var map = null;
var labels = [];
var infowindow = null;
var address = "4200 East Palm Canyon Dr, Palm Springs CA";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(33.796, -116.5);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
layer = new google.maps.KmlLayer("http://www.geocodezip.com/ParkerPalmSprings.xml", {
preserveViewport: true,
suppressInfoWindows: true
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", openIW);
var i = 0;
labels.push(new InfoBox({
content: "Gene Autry Residence",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7967, -116.500632),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "North Building",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7965, -116.4997),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "South Building",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "40px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-20, 0),
position: new google.maps.LatLng(33.7954, -116.4998),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
/* content: "<div style='fontSize: 8pt;width: 15px;writing-mode: tb-rl;'> East Parking Lot </div>"*/
content: "East Parking Lot",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "40px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-20, 0),
position: new google.maps.LatLng(33.7958, -116.4996),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Lobby",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79525, -116.50017),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Mr Parkers",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "40px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-20, 0),
position: new google.maps.LatLng(33.79543, -116.50045),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Ballroom",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.79597, -116.50095),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "PSYC",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7957, -116.50088),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Autry Lawn",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.797, -116.50075),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "North Parking Lot",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "150px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-75, 0),
position: new google.maps.LatLng(33.7971, -116.500),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Tennis Courts",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7971, -116.50115),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Petanque Courts",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7963, -116.50075),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Palm Court",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.79597, -116.50045),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Autry Pool",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "7pt",
width: "35px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-17, 0),
position: new google.maps.LatLng(33.79625, -116.50106),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Picnic Area",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.796345, -116.50123),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "<div style='fontSize: 8pt;width: 15px;writing-mode: tb-rl;'> Backyard </div>",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "10px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(0, 0),
position: new google.maps.LatLng(33.7965, -116.5014),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Croquet Lawn",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.79595, -116.4999),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Firepit",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79591, -116.50019),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Villa" /* (James, Noah, Max, Zoe) */ ,
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79619, -116.50051),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Villa" /* (Jake, Lola, Ian, Remi) */ ,
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79619, -116.50016),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Villa" /* (Ben, Julia, Joey, Jayda) */ ,
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.7965, -116.50033),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "North Pool",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "7pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.796455, -116.50002),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Great Lawn",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7975, -116.50115),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
function showLabels() {
for (var i = 0; i < labels.length; i++) {
labels[i].setMap(map);
}
}
function hideLabels() {
for (var i = 0; i < labels.length; i++) {
labels[i].setMap(null);
}
}
var ParkerPalmSprings = new google.maps.LatLng(33.795451, -116.500116);
var marker = createMarker(ParkerPalmSprings,
"Parker Palm Springs",
'<b>Parker Palm Springs</b><br>4200 East Palm Canyon Dr<br>Palm Springs CA<br>');
google.maps.event.trigger(marker, 'click');
var MercedesBenzOfPalmSprings = new google.maps.LatLng(33.794431, -116.501985);
var MBmarker = createMarker(MercedesBenzOfPalmSprings,
"Mercedes-Benz of Palm Springs",
'<b>Mercedes-Benz of Palm Springs</b><br>4095 East Palm Canyon Drive<br>Palm Springs CA<br>');
google.maps.event.addListener(map, "zoom_changed", function() {
if (map.getZoom() >= 18) {
showLabels();
} else {
hideLabels();
}
});
google.maps.event.addListener(map, "click", function() {
infowindow.close();
});
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 100)
});
function openIW(KMLevent) {
infowindow.close();
infowindow.setOptions({
content: '<div style="height:100;width:250">' + KMLevent.featureData.infoWindowHtml + '</div>',
position: KMLevent.latLng,
pixelOffset: KMLevent.pixelOffset
});
infowindow.open(map);
}
function createMarker(latlng, title, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/geocodezip/v3-utility-library#master/archive/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>