jsfiddle上でgmaps.jsを動かしたいのですが動きません
どう設定すれば使えるのでしょうか?
var type = '';
function ryo() {
type = 'ryo';
alert("りょうちんとして位置情報を送信します。");
}
function maro() {
type = 'maro';
alert("まろしとして位置情報を送信します。");
}
window.onload = function() {
setInterval(function() {
GMaps.geolocate({
success: function(position) {
dataStore.send({
lat: position.coords.latitude,
lon: position.coords.longitude,
type: type
});
},
error: function(error) {
console.log('Geolocation failed: ' + error.message);
},
not_supported: function() {
console.log('Your browser does not support geolocation');
},
always: function() {
console.log('done');
}
});
}, 5000);
var lat = 35.710285;
var lng = 139.77714;
var map = new GMaps({
div: "#map",
lat: lat,
lng: lng,
zoom: 17
});
dataStore.on('send', function(data) {
var lat = data.value.lat,
lng = data.value.lon;
var img = '';
if (data.value.type == 'ryo') {
img = 'http://i.gyazo.com/7502afdcf0bbcc1f6d8f3d85e66616f6.png';
} else if (data.value.type == 'maro') {
img = 'http://i.gyazo.com/f7b2e1dac073595c3e53a260413aec14.png';
}
map.setCenter(lat, lng);
map.addMarker({
lat: lat,
lng: lng,
title: "LIG社員",
icon: img,
infoWindow: {
content: "<p>LIG社員は<br/>ココだよ!</p>"
}
});
console.log('recieve', data.value);
});
};
<
div id = "map" >
<
button onClick = "ryo()" >
りょうちん
<
button onClick = "maro()" >
まろし
<link rel="stylesheet" href="./foundation.css"><style>@charset "utf-8";
#map {
height: 400px;
}
</style>
<title>gmapsサンプル</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="./gmaps.js"></script>
<script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
<script>
var dataStore = new MilkCocoa("https://{io-bi2tzwnsk}.mlkcca.com").dataStore('chat');