Adding Multiple Markers to Google Maps v3 from JSON - ajax

I've been trying to make a web app that shows multiple markers on google maps. I tried using this tutorial and the code works fine until I get to the point where I need to get the JSON data from the server instead of using the example JSON data in the same js file as the code.
I try to save the ajax response into variable but i get this error
TypeError: json is null
[Break On This Error]
for (var i = 0, length = json.length; i < length; i++) {
And this is the code I am using.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(57.9, 14.6),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "http://myurl.com/getdata",
'dataType': "json",
'success': function (data) {
json = data; } });
return json;})();
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
}
var infoWindow = new google.maps.InfoWindow();
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
// Creating a closure to retain the correct data
//Note how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>

Related

Mark location from database using leaflet in laravel

I have a table called location in my database which consists of latitude and longitude I need to mark them on the map using leaflet open street map. And I have no idea how do I do that. Till now I am only able to mark manually. If you have any resources from where I can get idea please help
This is my database:
#extends('master');
#section('content');
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
#map {position: absolute; top: 0; bottom: 0; left: 0; right: 0}
</style>
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap
contributors'
}).addTo(map);
L.marker([19.0971904, 72.8891392]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
</script>
#endsection

Look like you might need to use Ajax
<script>
$(function(){
$.ajax({
url: "/leaflect",
type: 'GET',
success: function(data) {
$.each(data, function( key, value ) {
L.marker([value.latitude, value.longitude]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
})
},
error: function(data) {
}
});
})
</script>
and route will be like
Route::get('leaflect',[ControllerName#methodName]);
controller method would be like
public function methodName(){
return Model::get();
}

javascript canvasjs Get data points dynamically from file.txt

Objective:
I want to get data from file.txt thats is saved local in /var/www/html/file.txt and use it for the doughnut chart on my webpage dynamically on a interval of 2 seconds
file.txt only has one entry and looks like:
34
the javascript i have tried:
$.get("file.txt", function(data) {
var x = 0;
var allLines = data.split('\n');
if(allLines.length > 0) {
for(var i=0; i< allLines.length; i++) {
dataPoints.push({y: parseInt(allLines[i])});
x += .25;
}
}
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Chart using Text File Data"
},
data: [{
type: "doughnut",
dataPoints : dataPoints,
}]
});
chart.render();
});
}
Entire html looks like
<!DOCTYPE html>
<html>
<head>
<title>Chart using txtfile Data</title>
<script type="text/javascript" src="http://canvasjs.com/assets/script /jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.get("graph.txt", function(data) {
var xVal = 0;
var allLines = data.split('\n');
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Chart using Text File Data"
},
data: [{
type: "line",
dataPoints : [function()
{
if(allLines.length > 0) {
for(var i=0; i< allLines.length; i++) {
xVal +=.25;
dataPoints.push({x : xVal, y: parseInt(allLines[i])});
}
}
}]
}]
});
chart.render();
},'text');
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

I believe something like this may work for you. You may have to use Firefox as Chrome doesn't like cross origin requests
First, dataPoints was undefined, I moved the code into a function inside dataPoints. I changed your variable name from x to xVal. Added the 'text' word so the $get knows what format it's reading and also there was an extra bracket it seemed. Give this a try.
$.get("graph.txt", function(data) {
var xVal = 0;
var allLines = data.split('\n');
var dps = [];
for(var i=0; i< allLines.length; i++) {
xVal +=.25;
dps.push({x : xVal, y: Number(allLines[i])});
}
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Chart using Text File Data"
},
data: [{
type: "line",
dataPoints : dps
}]
});
chart.render();
},'text');

Google Maps current location JavaScript error

I want to get my current location using Google Maps Geolocation by Latitude and Longitude and I also want to set the origin as my current location but I'm not getting the current location. What should I do?
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Draggable directions</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
var lat, lon, mapOptions;
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
mapOptions = {
zoom: 7,
center: new google.maps.LatLng(lat, lon),
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});
calcRoute();
},
function(error){
alert('ouch');
});
}
else {
alert("Your browser doesn't support geolocations, please consider downloading Google Chrome");
}
}
function calcRoute() {
var request = {
origin: new google.maps.LatLng(lat, lon),
destination: new google.maps.LatLng(10.5200,76.2100),
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.0;
document.getElementById('total').innerHTML = total + ' km';
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%">
<p>Total Distance: <span id="total"></span></p>
</div>
</body>
</html>

JVectorMap - Selecting a Region Using a Button

I am using J Vector Map (http://jvectormap.com/documentation/javascript-api/) to create a map of the United States.
What I want to be able to do is have a button for each state that you can click on and have the corresponding region in the map be selected (or unselected, if it already was selected). I am trying to use map.setSelectedRegion for this, but I can't get any of the code to work. Currently trying map.setSelectedRegion("US-CA") to no avail.
Any ideas on what to do?
Thanks!

There seem to be a lot of request for linking links with jvectormap.
I've put together a jsfiddle here: http://jsfiddle.net/3xZ28/117/
HTML
<ul id="countries">
<li>Romania</li>
<li>Australia</li>
</ul>
<div id="world-map" style="width: 600px; height: 400px"></div>
JS
var wrld = {
map: 'world_mill_en',
regionStyle: {
hover: {
"fill": 'red'
}
}
};
function findRegion(robj, rname) {
var code = '';
$.each(robj, function (key) {
if ( unescape(encodeURIComponent(robj[key].config.name)) === unescape(encodeURIComponent(rname)) ) {
code = key;
};
});
return code;
};
$(document).ready(function () {
$('#world-map').vectorMap(wrld);
var mapObj = $('#world-map').vectorMap('get', 'mapObject');
$('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type,
cntrycode = findRegion(mapObj.regions, $(elem).text());
if (evtype === 'mouseover') {
mapObj.regions[cntrycode].element.setHovered(true);
} else {
mapObj.regions[cntrycode].element.setHovered(false);
};
});
});

Once you've set the handle
var mapObject = $('#your_map_div_id').vectorMap('get', 'mapObject');
Just use the built in function setSelectedRegions (mind the "s"):
mapObject.setSelectedRegions(your_region_code); //to set
mapObject.setSelectedRegions({your_region_code:false}); //to unset
If it still doesn't work, post your code, maybe it's something else.

This code is outdated, below is updated version of the code, according jvectormap latest API. Here is demo snippet:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jqvmap.min.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.vmap.min.js"></script>
<script src="jquery.vmap.world.js"></script>
<script>
jQuery(document).ready(function () {
$('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#2f95c9',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
regionsSelectableOne: false,
regionsSelectable: false,
series: {
regions: [{
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
}
});
var mapObj = $('#vmap').data('mapObject');
$('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type;
if (evtype === 'mouseover') {
mapObj.select($(elem).attr('id'));
} else {
mapObj.deselect($(elem).attr('id'));
};
});
});
</script>
</head>
<body>
<ul id="countries">
<li><a id="RO" href="">Romania</a></li>
<li><a id="AU" href="">Australia</a></li>
</ul>
<div id="vmap" style="width: 100vw; height: 100vh;"></div>
</body>
</html>

how to use the Dojo code in Enyo..?

I'm a new developer in Enyo(TouchPad). I would like to develop an app consisting some charts in it. so I'm trying to use Dojo framework libraries in Enyo.
Can anyone please help me in how to include the dojo code my application.
I'm posting my code, please have a look.
INDEX.HTML :
<!doctype html>
<html>
<head>
<title>Canvas Demo</title>
<script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
<script src="lib/widget/Chart2D.js" type="text/javascript"> </SCRIPT>
<script src="lib/chart2D.js" type="text/javascript"> </SCRIPT>
<script src="lib/tom.js" type="text/javascript"> </SCRIPT>
</head>
<body>
<script type="text/javascript">
enyo.create({kind: "CanvasDemo"}).renderInto(document.body);
</script>
</body>
</html>
.Js file ::
enyo.kind({
name: "CanvasDemo",
kind: enyo.Control,
nodeTag: "canvas",
domAttributes: {
width:"300px",
height:"300px",
style: "border: 2px solid #000;"
},
// After the canvas is rendered
rendered: function() {
// I want to place the dojo code here to display a chart in the canvas.
}
});
DOJO CODE ::
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.Tom');
/* JSON information */
var json = {
January: [12999,14487,19803,15965,17290],
February: [14487,12999,15965,17290,19803],
March: [15965,17290,19803,12999,14487]
};
/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
chartData.push({ x: i, y: json['January'][i] });
});
/* resources are ready... */
dojo.ready(function() {
var chart2 = new dojox.charting.Chart2D('chart2').
setTheme(dojox.charting.themes.Tom).
addPlot('default', {type: 'Pie', radius: 70, fontColor: 'black'}).
addSeries('Visits', chartData).
render();
var anim = new dojox.charting.action2d.MoveSlice(chart2, 'default');
chart2.render();
});
Please help me in how to modify the dojo code ,so that it can work in the enyo..
Thanks in Advance.
Regards,
Harry.
index.html :
<!doctype html>
<html>
<head>
<title>dojo</title>
<script src="C:\WebOs\Development\enyo\1.0\framework\enyo.js" type="text/javascript"></script>
<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1-src\dojo-release-1.6.1-src\dojo\dojo.js"></script>
/head>
<body>
<script type="text/javascript">
new enyo.Canon.graphs2().renderInto(document.body);
</script>
</body>
</html>
Source/Charts1.js :
enyo.kind({
name: "enyo.Canon.graphs2",
kind: enyo.Control,
components: [
{kind: "PageHeader", content: "bargraph"},
//{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."},
{kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1},
],
displayGraph: function() {
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');
/* JSON information */
var json = {
January: [12999,14487,19803,15965,17290],
February: [14487,12999,15965,17290,19803],
March: [15965,17290,19803,12999,14487]
};
/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
chartData.push({ x: i, y: json['January'][i] });
});
/* resources are ready... */
dojo.ready(function() {
//create / swap data
var barData = [];
dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
var chart1 = new dojox.charting.Chart2D('chart1').
setTheme(dojox.charting.themes.PlotKit.green).
addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }).
addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }).
addPlot('default', {type: 'Columns', gap:5 }).
addSeries('Visits For February', chartData, {});
var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
chart1.render();
// var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');
});
}
});
Here I'm not sure about how to call the dojo code in enyo.
and
depends.js :
enyo.depends(
"source/charts1.js",
"lib/Chart2D.js",
"lib/widget/Chart2D.js",
"lib/blue.js",
"lib/dojo.js"
);
Now I'm getting the following errors :
error: Uncaught ReferenceError: dojo is not defined, Chart2D.js:1
[20110818-09:33:13.136736] error: Uncaught ReferenceError: dojo is not defined, widget/Chart2D.js:1
[20110818-09:33:13.138227] error: Uncaught ReferenceError: dojo is not defined, blue.js:1
[20110818-09:33:13.150707] error: Uncaught TypeError: Cannot read property 'graphs2' of undefined, index.html:10
It is working fine when I use it as a .HTML file with the same code in browser.
Chart.html :
<html>
<head>
<title>dojo</title>
<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1- src\dojo-release-1.6.1-src\dojo\dojo.js"></script>
</head>
<body>
<div id="chart1" style="width:260px;height:200px;"></div>
<script>
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');
/* JSON information */
var json = {
January: [12999,14487,19803,15965,17290],
February: [14487,12999,15965,17290,19803],
March: [15965,17290,19803,12999,14487]
};
/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
chartData.push({ x: i, y: json['January'][i] });
});
/* resources are ready... */
dojo.ready(function() {
//create / swap data
var barData = [];
dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
var chart1 = new dojox.charting.Chart2D('chart1').
setTheme(dojox.charting.themes.PlotKit.green).
addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }).
addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }).
addPlot('default', {type: 'Columns', gap:5 }).
addSeries('Visits For February', chartData, {});
var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
chart1.render();
var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');
});
</script>
</body>
</html>
Please help me in working with this in Enyo.
Thanking You.
Kind Regards,
Harry.

I don't think you have to modify the Dojo code. In Enyo, you have to tell the framework where it has to look for included JS files. Yo do so editing the depends.js file.
The index.html:
<!doctype html>
<html>
<head>
<title>Canvas Demo</title>
<script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
new enyo.Canon.graphs2().renderInto(document.body);
</script>
</body>
</html>
and depends.js:
enyo.depends(
"lib/dojo/dojo.js" ,
"source/charts1.js"
);
You'll have to copy everything Dojo needs to work (dojo, dojox, dijit) into lib, and check enyo paths.
I get a Dojo error when creating the new Chart2D object, and I'm not a Dojo expert to fix this. It's in the line:
var chart1 = new dojox.charting.Chart2D("simplechart");
I've modified your code:
enyo.kind({
name: "enyo.Canon.graphs2",
kind: enyo.Control,
components: [
{kind: "PageHeader", content: "bargraph"},
//{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."},
{kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1},
],
displayGraph: function() {
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');
/* JSON information */
var json = {
January: [12999,14487,19803,15965,17290],
February: [14487,12999,15965,17290,19803],
March: [15965,17290,19803,12999,14487]
};
/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
chartData.push({ x: i, y: json['January'][i] });
});
/* resources are ready... */
dojo.ready(function() {
//create / swap data
var barData = [];
dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
var chart1 = new dojox.charting.Chart2D("simplechart"); // HERE IS THE PROBLEM
chart1.setTheme(dojox.charting.themes.PlotKit.green);
chart1.addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 });
chart1.addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' });
chart1.addPlot('default', {type: 'Columns', gap:5 });
chart1.addSeries('Visits For February', chartData, {});
var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
chart1.render();
// var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');
});
}
});
The object doesn't get instantiated. Got null pointer :-(

Resources