Skip to content

Instantly share code, notes, and snippets.

@hidsh

hidsh/index.html

Created August 30, 2014 12:51
Show Gist options
  • Save hidsh/7fa92272521dcf3b29fa to your computer and use it in GitHub Desktop.
Save hidsh/7fa92272521dcf3b29fa to your computer and use it in GitHub Desktop.
Download ZIP
civic hack osaka 2014: update google maps
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1.0, user-scalable=no">
<title>map</title>
<style>
html, body, #map-canvas {height: 97%; margin: 0; padding: 0}
table {border-collapse:collapse; margin:0; padding:0}
tr, td {margin:0; padding:0}
</style>
<script type="text/javascript" charset="utf-8" src="js/applican-1.7.0.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="./my.js"></script>
</head>
<!-- <body onload="start_polling()" onUnload="stop_polling()"> -->
<body>
<div>
<table>
<tr>
<td><img src="img/btn1_off.png" height="50"></td>
<td><img src="img/btn2_off.png" height="50"></td>
<td><img src="img/btn3_off.png" height="50"></td>
<td><img src="img/btn4_off.png" height="50"></td>
<td><img src="img/btn5_off.png" height="50"></td>
</tr>
</table>
</div>
<!-- <textarea id="dumpAreaLaunchWebview" rows="3" cols="30"></textarea><br /> -->
<!-- <a href="javascript:void(0)" onClick="addLaunchWebviewCloseEventListener();return false;">クローズイベント登録</a><br /> -->
<div id="map-canvas"></div>
<!-- <a href="http://machibeacon.com/map/hoge.html?launch_webview=yes_without_toolbar">地図を見る</a><br /> -->
<br />
</body>
</html>
Raw
my.js
// my.js
var bcon1, bcon2;
var myLatlng = new google.maps.LatLng(34.7088126,135.5123602);
var dummy_opt, far_opt, near_opt;
function initialize() {
var mapOptions = {
zoom: 17,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// danger zone /////////////////////////////////////////////////////////////
var dang1 = {
path: 'M 0,20 15,55 25,30 z',
fillColor: "orange",
fillOpacity: 0.6,
scale: 1,
strokeColor: "orange",
strokeWeight: 3,
};
var dang2 = {
path: 'M -30,-80 -30,-50 -55,-60 -60,-75 z',
fillColor: "orange",
fillOpacity: 0.6,
scale: 1,
strokeColor: "orange",
strokeWeight: 3,
};
var marker_dang1 = new google.maps.Marker({
position: myLatlng,
icon: dang1,
map: map
});
marker_dang1.setMap(map);
var marker_dang2 = new google.maps.Marker({
position: myLatlng,
icon: dang2,
map: map
});
marker_dang2.setMap(map);
// beacons //////////////////////////////////////////////////////////////
dummy_opt = {
// center: myLatlng,
radius: 3,
fillColor:'#1111FF',
fillOpacity:0.8,
strokeOpacity:0.0,
map: map
};
far_opt = {
// center: myLatlng,
radius: 20,
fillColor:'#FF0000',
fillOpacity:0.3,
strokeOpacity:0.0,
map: map
};
near_opt = {
// center: myLatlng,
radius: 5,
fillColor:'#FF0000',
fillOpacity:0.8,
strokeOpacity:0.0,
map: map
};
beacon_latlng_list = [[34.71036194173367,135.5111539363861],
[34.71015027240899,135.5113685131073],
[34.71000915922494,135.5122697353363],
[34.70935650761714,135.51251649856567],
[34.70923303240936,135.51244139671326],
[34.70944470408129,135.51285982131958],
[34.70830696247591,135.51013469696045],
[34.70935650761714,135.51004886627197],
[34.70685168877644,135.50938367843628],
[34.70685168877644,135.50938367843628],
[34.70863329306403,135.51056385040283],
[34.710335483097715,135.51101446151733],
[34.71094402958358,135.5116367340088],
[34.710758820257496,135.51193714141846],
[34.71070590323101,135.51217317581177],
[34.71051187384428,135.51268815994263],
[34.710838195733736,135.5128276348114],
[34.71031784400238,135.5134391784668],
[34.71060006907649,135.51451206207275],
[34.711182155250555,135.5117654800415],
[34.70962109672747,135.5135142803192],
[34.70770721641626,135.51173329353333],
[34.70701926705219,135.5126130580902],
[34.7070104471514,135.5130422115326],
[34.70694870781956,135.5135142803192],
[34.70742498147182,135.51430821418762],
[34.70790125238197,135.5140507221222],
[34.70821876479868,135.5118727684021],
[34.70806882853154,135.51442623138428],
[34.708306962475916,135.5146300792694],
[34.70772485606831,135.51179766654968],
[34.70878322830803,135.51185131072998],
[34.70945352372253,135.5118191242218],
[34.7099033241789,135.51225900650024],
[34.70958581822832,135.51231265068054],
[34.70878322830803, 135.51233410835266],
[34.709629916349904,135.51352500915527],
[34.71058243003757,135.51128268241882],
[34.71052951289824,135.5117654800415],
[34.71032666355052,135.51241993904114],
[34.71011499413554,135.5130100250244],
[34.7099474221312,135.51358938217163],
[34.7099474221312,135.51358938217163],
[34.709471163002206,135.5150270462036],
[34.7090919176605,135.5150270462036],
[34.70955935934407,135.5141580104828],
[34.709294770036294,135.51373958587646],
[34.709021360195784,135.5137073993683],
[34.709083097980695,135.51265597343445],
[34.7090919176605,135.5126452445984],
[34.708465718057965,135.5130422115326],
[34.70850099703484,135.51291346549988],
[34.70755727922192,135.51270961761475],
[34.708245224111714,135.51280617713928],
[34.70799827019415,135.51326751708984],
[34.70794535140162,135.513836145401],
[34.70835988103713,135.51409363746643],
[34.708306962475916,135.51235556602478],
[34.70906545861827,135.51310658454895],
[34.708712670580006,135.51340699195862],
[34.70888024508579,135.5130958557129],
[34.70921539307893,135.5135142803192],
[34.70831578223847,135.51326751708984]
];
// dummy beacons
for(var i=0; i<beacon_latlng_list.length; i++) {
var latlng = new google.maps.LatLng(beacon_latlng_list[i][0], beacon_latlng_list[i][1]);
var c = new google.maps.Circle(dummy_opt);
c.setOptions({center: latlng});
}
// near beacon
var latlng = new google.maps.LatLng(34.70845689831142,135.51329433918);
bcon1 = new google.maps.Circle(near_opt);
bcon1.setOptions({center: latlng});
// far beacon
var latlng = new google.maps.LatLng(34.70841720944021,135.51360547542572);
bcon2 = new google.maps.Circle(far_opt);
bcon2.setOptions({center: latlng});
}
google.maps.event.addDomListener(window, 'load', initialize);
// beacon polling (send GET method) ////////////////////////////////////////
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null;
}
}
} else {
return null;
}
}
function send_get(url) {
var request = createXMLHttpRequest();
request.open("GET", url, true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
// [{"id":1,"tag":"tag01","status":"near"}]
var obj = JSON.parse(request.responseText);
// console.log(obj[0].id + ": " + obj[0].status); // "near" or "far"
var id = obj[0].id;
var status = obj[0].status;
if(id == "1") {
if(status == "near") {
bcon1.setOptions(near_opt);
// bcon2.setOptions(far_opt);
} else {
bcon1.setOptions(far_opt);
// bcon2.setOptions(near_opt);
}
} else { // id == "2"
if(status == "near") {
// bcon1.setOptions(far_opt);
bcon2.setOptions(near_opt);
} else {
// bcon1.setOptions(near_opt);
bcon2.setOptions(far_opt);
}
}
}
}
request.send("");
}
function get_x() {
var url_list = ["http://machibeacon.com/beacon/view/1",
"http://machibeacon.com/beacon/view/2"];
var i = 0;
return function () {
i = (i + 1) % 2; // 0 or 1
send_get(url_list[i]);
};
}
var get_bcon = get_x();
var timer1;
function start_polling() { timer1 = setInterval("get_bcon()", 1000); }
function stop_polling() { clearInterval(timer1); }
start_polling();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment