I’ve got a weather website, which misses lightning data. I found a data source from Blitzortung.org wich contains the Lat, Lon and time info of a lightning strike. How do I get this on Google Maps?
I want the data to be realtime, just like on blitzortung.org. It should be displayed on the map, preferably as a red or yellow dot, changing color as it ages (probably a JavaScript or PHP function that can edit css to do this) and of course on the right place.
I unfortunately had no experience with JSON and SQL, but don’t call me lazy because I don’t have the time to really learn this. I’ve got the map and the radar overlay which updates every 5 minutes: http://met.nl.eu.org/radar.html
this is the data source: http://www.lightningmaps.org/live/ I can use this source, provided that I will not use it for profit and that I add link to Blitzortung.org
So my main question is, how do I get Google maps to interpret the coords in the JSON file as places on the map, and draw a marker on the place, which changes color as it ages?
server:
Ubuntu with Apache,
SQL databases,
PHP5
and python for image processing
Edit: this script might help a bit more:
//
//
//
var maps = {
0: { "west": -180.0, "east": 180.0, "north": 90.0, "south": -60.0, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 0, region: 0 },
10: { "west": -20.0, "east": 44.0, "north": 71.5, "south": 23.1, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 1 },
11: { "west": 0.0, "east": 35.0, "north": 71.5, "south": 48.5, "projection": 1, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },
12: { "west": -15.0, "east": 7.0, "north": 60.0, "south": 47.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },
13: { "west": -12.0, "east": 20.0, "north": 56.0, "south": 33.6, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },
14: { "west": 12.0, "east": 37.0, "north": 48.0, "south": 28.5, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },
15: { "west": 10.0, "east": 30.0, "north": 56.0, "south": 43.1, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },
16: { "west": 2.0, "east": 18.0, "north": 55.5, "south": 45.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },
20: { "west": 110.0, "east": 180.0, "north": 10.0, "south": -51.6, "projection": 0, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 2 },
21: { "west": 156.0, "east": 186.0, "north": -25.0, "south": -48.8, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 2 },
22: { "west": 135.0, "east": 159.0, "north": -24.0, "south": -43.8, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 2 },
30: { "west": -130.0, "east": -60.0, "north": 62.5, "south": 2.3, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 3 },
31: { "west": -108.0, "east": -92.0, "north": 38.0, "south": 24.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },
32: { "west": -92.0, "east": -76.0, "north": 36.0, "south": 24.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },
33: { "west": -85.0, "east": -70.0, "north": 46.0, "south": 34.5, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },
34: { "west": -105.0, "east": -85.0, "north": 50.0, "south": 35.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },
35: { "west": -127.0, "east": -105.0, "north": 45.0, "south": 27.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },
36: { "west": -86.0, "east": -60.0, "north": 31.0, "south": 6.4, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },
40: { "west": 85.0, "east": 155.0, "north": 58.0, "south": -4.5, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 4 },
41: { "west": 125.0, "east": 148.0, "north": 46.3, "south": -5.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 4 },
50: { "west": -102.0, "east": -22.0, "north": 16.0, "south": -57.0, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 5 },
51: { "west": -84.0, "east": -63.0, "north": 16.0, "south": 28.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 5 },
60: { "west": -25.0, "east": 60.0, "north": 40.0, "south": -38.5, "projection": 0, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 6 },
61: { "west": 14.0, "east": 34.0, "north": -20.0, "south": -37.5, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 6 }
};
var map = maps [page_0];
var Kreis_green = new Image();
Kreis_green.src = "../../Images/Kreis_green.png";
var Kreis_gray = new Image();
Kreis_gray.src = "../../Images/Kreis_gray.png";
var D_g = new Image();
D_g.src = "../../Images/Antenne_green.png";
var D_r = new Image();
D_r.src = "../../Images/Antenne_gray.png";
var S_g = new Image();
S_g.src = "../../Images/Lautsprecher_green.png";
var S_r = new Image();
S_r.src = "../../Images/Lautsprecher_gray.png";
var audiocnt= 0;
var audiocntmax= 10;
var AudioData= 'data:audio/x-wav;base64,UklGRlQOAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YTAOAAAAAAAA//8CAP7/AQAAAP7/AwD+/wEA//8BAP//AQAAAP//AQAAAP//AQAAAAAAAAAAAP//AwD8/wUA+v8GAPv/BAD9/wEAAQD+/wIA/////wIA/v8CAP//AAD//wIA//8BAP7/AgD+/wMA/f8CAP//AQD+/wIA/v8DAP3/AgD+/wIA//8AAAAAAAABAP//AAAAAAAAAQD//wAAAAABAP//AAABAP7/AgD/////AgD//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8CAP7/AgD+/wIA/v8CAP7/AgD+/wIA/v8CAP7/AgD+/wIA/v8CAP7/AgD+/wMA/P8EAP3/AgAAAP7/AwD9/wIAAAD+/wQA+/8EAP3/AgAAAP//AAABAP7/AwD+/wAAAQD//wEA//8BAP//AQAAAP7/AwD+/wAAAgD9/wIAAAD+/wMA/f8CAP//AQD//wAAAQD//wEA//8AAAIA/f8DAP3/AgD//wEA//8BAP//AAACAP3/BAD7/wUA/P8EAPz/AwD+/wEAAAD//wIA/f8EAPv/BQD7/wUA/P8DAP7/AQD//wEAAAD//wIA/f8DAP7/AQD//wEA//8BAP//AAABAP//AQD//wEA/v8DAP3/AwD+/wAAAAABAP//AQD/////AwD9/wIA/////wIA//8AAAEA/v8CAP//AAABAP//AQD//wAAAQD+/wMA/P8FAPv/AwD/////AwD8/wQA/f8BAAEA/f8FAPr/BgD6/wYA+/8EAPz/AwD//wAAAQD+/wEAAQD+/wIA/v8CAP//AAABAP7/AgD//wEA//8BAP7/AgD//wEA//8AAAEA//8BAP//AAABAAAA//8AAAEA//8BAP//AAAAAAEA/v8DAPz/AwD+/wEAAAAAAP//AgD9/wMA/v8BAAAAAAAAAP//AgD+/wIA/////wIA//8AAAEA/v8CAP7/AgD//wAAAQD9/wQA/P8EAP3/AQAAAAAAAAAAAAAAAAAAAAEA/v8CAP//AAABAP7/AgD+/wMA/P8DAP////8CAP7/AQABAP3/BAD7/wUA/f8BAAAAAAD//wIA/f8DAP7/AgD+/wIA/f8EAP3/AQAAAAAAAAAAAAAA/v8DAP7/AQAAAP//AAABAP//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iQA0ADUAcgCGAJAAvwClAEMANAB6AKUAhwCiANMAhwAdAP7/AQABAP7/AQAAAAAAAAD//wEAAAAAAAAAAAAAAP//AgD+/wMA/f8CAP7/AgD//wAAAQD+/wIA/v8CAP7/AQAAAP//AQD//wEA//8BAP//AQD//wEA//8BAP//AQAAAAAA//8BAP//AgD//wAA//8CAP7/AgD+/wIA/v8CAP//AAAAAAAAAAAAAAIA/P8EAP3/AQABAP////8DAPz/BAD8/wMA/v8CAP7/AQD//wEA//8CAP3/AwD9/wMA/f8DAP3/AgAAAP7/AwD9/wEAAQD+/wMA/f8CAP//AAABAP7/AwD9/wIA//8AAAAAAAABAP7/AwD8/wMA//8BAP7/AgD+/wEAAAD//wIA/v8BAP//AQD//wIA/f8DAP7/AAACAP3/AgAAAP//AgD9/wIAAAD+/wQA+/8FAPz/AgD//wEA//8CAP3/AgD//wAAAgD8/wQA/P8FAPv/BQD6/wYA/P8DAP7/AQAAAP//AgD9/wQA/f8BAAAAAAAAAAAAAAD//wIA/v8BAAAA//8CAP3/BAD8/wMA/v8BAP//AgD+/wEAAAD+/wQA/P8EAPz/BAD8/wMAAAD+/wIA//8AAAEA//8AAAEA//8BAAAA//8BAP//AgD/////AgD+/wEAAAAAAP//AgD9/wIAAAD//wAAAQD//wAAAgD8/wQA/v8AAAIA/f8DAP3/AwD9/wMA/f8DAP3/AgD//wAAAQD+/wMA/P8EAP3/AgD//wAAAQD+/wMA/f8CAP//AAABAP//AQD+/wIA//8AAAEA/v8CAP//AAAAAAAAAAABAP////8BAAAAAAAAAAAAAAD//wIA/v8CAP//AAAAAAAAAQD+/wMA/P8EAP3/AgD//wAAAQD+/wIA//8AAAEA/v8DAPz/BAD8/wQA/f8CAP//AAABAP7/AgD//wEA//8AAAAAAQD//wEA/v8CAP//AQD//wEA//8BAP//AQD//wIA/f8DAP7/AQAAAP//AQAAAAAAAAAAAP//AwD8/wQA/f8CAP//AAAAAAAAAQD+/wIA/////wIA/v8BAAAA//8CAP3/BAD7/wUA/P8CAAAA//8CAP3/AwD+/wAAAgD9/wMA/v8AAAEA//8BAP//AQD//wEA//8AAAEA//8BAAAA/v8DAP3/AwD+/wEAAAAAAAAAAQD9/wQA/P8EAP3/AgD+/wEAAQD+/wMA/P8EAP3/AgD//wAAAAAAAAAAAQD+/wIA/////wIA/v8DAP3/AgD+/wEAAQD+/w==';
var myAudio = new Array (new Audio(AudioData),
new Audio(AudioData),
new Audio(AudioData),
new Audio(AudioData),
new Audio(AudioData),
new Audio(AudioData),
new Audio(AudioData),
new Audio(AudioData),
new Audio(AudioData),
new Audio(AudioData) );
var DetectorImages = new Array(new Image(),new Image(),new Image());
DetectorImages [0].src = "../Images/d00g.png";
DetectorImages [1].src = "../Images/d02g.png";
DetectorImages [2].src = "../Images/d03g.png";
var DetectorImage = DetectorImages [map ['detector_type']];
var StrokeImages = new Array(new Image(),new Image(),new Image(),new Image(),new Image(),new Image(),new Image(),new Image());
StrokeImages [0].src = "../Images/s02.png";
StrokeImages [1].src = "../Images/s03.png";
StrokeImages [2].src = "../Images/s04.png";
StrokeImages [3].src = "../Images/s05.png";
StrokeImages [4].src = "../Images/s06.png";
StrokeImages [5].src = "../Images/s07.png";
StrokeImages [6].src = "../Images/s09.png";
StrokeImages [7].src = "../Images/s99.png";
var Buffer = new Image();
var Background = document.getElementById('lb');
var Canvas = document.getElementById('Bild_Canvas');
var Context = Canvas.getContext('2d');
var Delay = document.getElementById('Delay');
var Strikes = document.getElementById('Strikes');
var Detectors = document.getElementById('Detectors');
var Sound = document.getElementById('Sound');
Delay.innerHTML = 'waiting';
var Type = 0;
if (parseInt(page_0/10)*10 == page_0) {
Type= 1; }
var first_Stroke = 0;
var display_Strikes = true;
var display_Detectors = false;
var use_Sound = false;
if (read_Cookie ('displayStrikes') != undefined) {
display_Strikes = eval(read_Cookie ('displayStrikes')); }
if (read_Cookie ('displayDetectors') != undefined) {
display_Detectors = eval(read_Cookie ('displayDetectors')); }
if (read_Cookie ('useSound') != undefined) {
use_Sound = eval(read_Cookie ('useSound')); }
var Server;
try {
// Mozilla, Opera, Safari sowie Internet Explorer (ab v7)
xmlHttp = new XMLHttpRequest(); }
catch(e) {
try {
// MS Internet Explorer (ab v6)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e) {
try {
// MS Internet Explorer (ab v5)
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e) {
xmlHttp = null;
xmlHttp2 = null; } } }
var Stations;
if (xmlHttp) {
xmlHttp.onreadystatechange = function () {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
Stations= eval('(' + xmlHttp.responseText + ')');
for (var s in Stations) {
Stations[s][1]= projection_x (map["west"],map["east"],map["width"],Stations[s][1]);
if (map['projection'] == 0) {
Stations[s][0]= mercator_y (map["west"],map["east"],map["north"],map["height"],Stations[s][0]); }
else {
Stations[s][0]= miller_y (map["west"],map["east"],map["north"],map["height"],Stations[s][0]); } } } }
xmlHttp.open('GET', '/Data/stations.json', true);
xmlHttp.send(null);
}
/****************************************************************/
/****************************************************************/
/****************************************************************/
function load()
{
}
setInterval(newBackground,63000);
setInterval(drawStrikes,49);
if (display_Strikes) {
Strikes.src= Kreis_green.src; }
else {
Strikes.src= Kreis_gray.src; }
if (display_Detectors) {
Detectors.src= D_g.src; }
else {
Detectors.src= D_r.src; }
if (use_Sound) {
Sound.src= S_g.src; }
else {
Sound.src= S_r.src; }
var ws;
if ("WebSocket" in window) {
var rnd;
try {
rnd= parseInt (Math.random()*10);
Delay.innerHTML = 'first try';
ws = new WebSocket("ws://websocketserver.blitzortung.org:801"+rnd); }
catch (e) {
rnd= parseInt (Math.random()*10);
Delay.innerHTML = 'second try';
ws = new WebSocket("ws://websocketserver.blitzortung.org:801"+rnd); }
Delay.innerHTML = 'connected';
ws.onopen = function()
{
var start_time= (Date.now()*1000000)-60000000000;
ws.send('{"west":'+map['west']+',"east":'+map['east']+',"north":'+map['north']+',"south":'+map['south']+',"time":'+start_time+'}');
};
ws.onmessage = function (evt)
{
var Strikes= eval('('+evt.data+')');
if ( ('ddelay' in Strikes) &&
('lat' in Strikes) &&
('lon' in Strikes) &&
('sta' in Strikes) &&
('dev' in Strikes) ) {
if ( (map ['west'] <= Strikes ['lon']) &&
(Strikes ['lon'] <= map ['east']) &&
(map ['south'] <= Strikes ['lat']) &&
(Strikes ['lat'] <= map ['north']) ) {
var Image;
if (map['strike_type'] == 0) {
Image= StrokeImages[parseInt(Math.random()*6)];
}
else if (map['strike_type'] == 1) {
Image= StrokeImages[6];
}
else {
Image= StrokeImages[7];
}
var Detectors = new Array();
if (display_Detectors) {
for (var s in Strikes ['sta'][1]) {
var d=Strikes ['sta'][1][s];
var Detector = new Array(Stations [d][0],Stations [d][1])
Detectors.push(Detector);
if (Detectors.length >= 100) {
Detector.shift();
}
}
}
var x= projection_x (map["west"],map["east"],map["width"],Strikes ['lon']);
var y= projection_y (map["west"],map["east"],map["north"],map["height"],Strikes ['lat'],map['projection']);
var Datum = new Date();
var Time = Datum.getTime();
first_Stroke = new Stroke (Context,x,y,Image,Detectors,Strikes ['sta'][0],Time,first_Stroke,Strikes ['dev']);
if (use_Sound) {
myAudio [audiocnt++].play();
if (audiocnt >= audiocntmax) {
audiocnt= 0;
}
}
Delay.innerHTML = 'Delay: '+Strikes['delay']+' s';
}
}
else if ( ('delay' in Strikes) &&
('latitude' in Strikes) &&
('longitude' in Strikes) &&
('signals_used' in Strikes) &&
('deviation' in Strikes) ) {
if ( (map ['west'] <= Strikes ['longitude']) &&
(Strikes ['longitude'] <= map ['east']) &&
(map ['south'] <= Strikes ['latitude']) &&
(Strikes ['latitude'] <= map ['north']) ) {
var Image;
if (map['strike_type'] == 0) {
Image= StrokeImages[parseInt(Math.random()*6)];
}
else if (map['strike_type'] == 1) {
Image= StrokeImages[6];
}
else {
Image= StrokeImages[7];
}
var Detectors = new Array();
if (display_Detectors) {
for (var s in Strikes ['signals_used']) {
var d= Strikes ['signals_used'][s];
var Detector = new Array(Stations [d][0],Stations [d][1])
Detectors.push(Detector);
if (Detectors.length >= 1000) {
Detector.shift();
}
}
}
var x= projection_x (map["west"],map["east"],map["width"],Strikes ['longitude']);
var y= projection_y (map["west"],map["east"],map["north"],map["height"],Strikes ['latitude'],map['projection']);
var Datum = new Date();
var Time = Datum.getTime();
first_Stroke = new Stroke (Context,x,y,Image,Detectors,0,Time,first_Stroke,Strikes ['deviation']);
if (use_Sound) {
myAudio [audiocnt++].play();
if (audiocnt >= audiocntmax) {
audiocnt= 0;
}
}
Delay.innerHTML = 'Delay: '+Strikes['delay']+' s';
}
}
};
ws.onclose = function()
{
};
}
else {
alert("WebSocket NOT supported by your Browser!"); }
function unload()
{
}
function StrikesOnOff()
{
if (display_Strikes) {
Strikes.src= Kreis_gray.src;
display_Strikes= false; }
else {
Strikes.src= Kreis_green.src;
display_Strikes= true; }
write_Cookie('displayStrikes', display_Strikes, 365);
}
function DetectorsOnOff()
{
if (display_Detectors) {
Detectors.src= D_r.src;
display_Detectors= false; }
else {
Detectors.src= D_g.src;
display_Detectors= true; }
write_Cookie('displayDetectors', display_Detectors, 365);
}
function SoundOnOff()
{
if (use_Sound) {
Sound.src= S_r.src;
use_Sound= false; }
else {
Sound.src= S_g.src;
use_Sound= true; }
write_Cookie('useSound', use_Sound, 365);
}
function newBackground()
{
var Datum = new Date();
var Time = Datum.getTime();
var t = Math.ceil(Time/60000);
Buffer.src= Bild_url+'?t='+String(t++);
Buffer.onload= function () {
Canvas.style.backgroundImage= "url(" + this.src + ")"; }
}
function drawStrikes()
{
var Datum = new Date();
var Time = Datum.getTime();
Context.clearRect(0,0,Canvas.width,Canvas.height)
var s = first_Stroke;
while (s != 0) {
if (s.Time > Time-600000) {
s.draw();
s= s.next; }
else {
s.next = 0;
s = 0; } }
}
function Stroke (Context, x, y, Image, Detectors, st_used, Time, Next, Deviation)
{
this.Context = Context;
this.Context.lineWidth = 1.0;
this.x = parseInt(x);
this.y = parseInt(y);
this.Image = Image;
this.Detectors = Detectors;
this.st_used = st_used;
this.Time = Time;
this.next = Next;
this.deviation = Deviation;
this.cnt = 0;
this.ray_cnt = 40;
this.detector_cnt = 200;
};
Stroke.prototype =
{
draw:
function()
{
var alpha1= (this.ray_cnt-this.cnt)/10;
if (alpha1 > 1) {
alpha1 = 1; }
var alpha2= alpha1*0.7;
if (this.cnt < this.detector_cnt) {
if ((display_Detectors)&&(this.Detectors.length > 0)) {
for (var i=this.st_used; i<this.Detectors.length; i++) {
var y = this.Detectors[i][0];
var x = this.Detectors[i][1];
if (this.cnt < this.ray_cnt) {
this.Context.beginPath()
this.Context.moveTo(this.x,this.y);
this.Context.lineTo(x,y);
this.Context.strokeStyle= 'rgba(0,255,128,'+alpha2.toString()+')';
this.Context.stroke(); }
this.Context.drawImage(DetectorImage,parseInt(x-DetectorImage.width/2),parseInt(y-DetectorImage.height/2)); }
for (var i=0; i<this.st_used; i++) {
var y = this.Detectors[i][0];
var x = this.Detectors[i][1];
if (this.cnt < this.ray_cnt) {
this.Context.beginPath()
this.Context.moveTo(this.x,this.y);
this.Context.lineTo(x,y);
this.Context.strokeStyle= 'rgba(64,192,255,'+alpha2.toString()+')';
this.Context.stroke(); }
this.Context.drawImage(DetectorImage,parseInt(x-DetectorImage.width/2),parseInt(y-DetectorImage.height/2)); } }
if (display_Strikes) {
this.Context.beginPath();
this.Context.arc(this.x,this.y,this.cnt,0,2*Math.PI,1);
this.Context.strokeStyle= 'rgba(255,255,255,'+alpha1.toString()+')';
this.Context.stroke(); } }
this.Context.drawImage(this.Image,parseInt(this.x-this.Image.width/2),parseInt(this.y-this.Image.height/2));
if (this.cnt < this.detector_cnt) {
this.cnt++; }
},
}
Just ignore the audio part, as I will not need it.
Edit: I’ve changed my needs. The first priority is to get the lightning strikes on the right place. The changing of color and stuff might come in a later point of the development but for now just the data on the map is fine.
Advertisement
Answer
1) Create a PHP script that will open and read the json from the live URL:
File: get_lightnings.php
<?php
header('Content-Type: application/json');
echo file_get_contents("http://www.lightningmaps.org/live/");
?>
This will read and echo the json.
2) Query that URL with javascript by using AJAX. Here is an example map script that will query the PHP file with jQuery.ajax() and create a marker for each lightning:
function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$.ajax({
dataType: "json",
url: "relative/path/to/get_lightnings.php"
}).done(function (data) {
data.d.forEach(function (lightning) {
new google.maps.Marker({
position: new google.maps.LatLng(lightning.lat, lightning.lon),
map: map,
title: 'Lightning'
});
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Below is the full HTML page for you can copy it right away and test it.
<!DOCTYPE html>
<html>
<head>
<title>Lightnings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#map-canvas {
height: 400px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Query and plot the data once the map is ready
google.maps.event.addListenerOnce(map, 'idle', function() {
$.ajax({
dataType: "json",
url: "get_lightnings.php"
}).done(function(data) {
data.d.forEach(function(lightning) {
new google.maps.Marker({
position: new google.maps.LatLng(lightning.lat, lightning.lon),
map: map
});
});
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
This was tested and is working fine.