Skip to content

Instantly share code, notes, and snippets.

@ryokaji
Created October 19, 2019 09:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryokaji/39ac8ef1079648a80e4b58939e984dcf to your computer and use it in GitHub Desktop.
Save ryokaji/39ac8ef1079648a80e4b58939e984dcf to your computer and use it in GitHub Desktop.
geolocation poc
var stations = [
{lat: 35.7212199, lng: 139.7066115}, // Mejiro
{lat: 35.7126133, lng: 139.70360930000004}, // Takadanobaba Station
{lat: 35.7012459, lng: 139.7002258}, // Shin-Ōkubo Station
{lat: 35.6897376, lng: 139.7003912}, // 新宿
{lat: 35.683033, lng: 139.70205550000003}, // 代々木
{lat: 35.6702285, lng: 139.70269759999996}, // 原宿
{lat: 35.6580339, lng: 139.70163579999996}, // 渋谷
{lat: 35.6467139, lng: 139.71007770000006}, // 恵比寿
{lat: 35.63391319999999, lng: 139.71555609999996}, //
{lat: 35.62651880000001, lng: 139.72335350000003},
{lat: 35.6198513, lng: 139.72818919999997},
{lat: 35.6284713, lng: 139.73875969999995}, // Shinagawa Station
{lat: 35.6457361, lng: 139.7475624}, // Tamachi Station
{lat: 35.6553809, lng: 139.7571289}, // Hamamatsuchō Station
{lat: 35.666379, lng: 139.75833979999993}, // Shimbashi Station
{lat: 35.6749187, lng: 139.76281990000007}, // Yūrakuchō Station
{lat: 35.68123620000001, lng: 139.76712480000003}, // Tokyo Station
{lat: 35.6918216, lng: 139.77093179999997}, // KANDA STATION
{lat: 35.698383, lng: 139.77307169999995}, // Akihabara Station
{lat: 35.7075424, lng: 139.77486039999997}, // Okachimachi Station
{lat: 35.7141672, lng: 139.7774091}, // Ueno Station
{lat: 35.7214573, lng: 139.7780133}, // Uguisudani Station
{lat: 35.7281578, lng: 139.77064139999993}, // Nippori Station
{lat: 35.73200569999999, lng: 139.76688560000002}, // Nishi-Nippori Station
{lat: 35.7381581, lng: 139.76081539999996}, // Tabata Station
{lat: 35.7365665, lng: 139.7470098}, // Komagome Station
{lat: 35.7295028, lng: 139.7109001}, // Ikebukuro Station
];
function initMap() {
var myLatLng = {lat: 35.681236 , lng: 139.767};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: myLatLng
});
service = new google.maps.places.PlacesService(map);
}
limit_dist = 3000; // within 3km
window.onload = (event) => {
var form = document.querySelector("#formarea");
form.onsubmit = (e) => {
e.preventDefault();
var name = document.querySelector("#locname").value;
var request = {
query: name,
fields: ['name', 'geometry'],
};
service.findPlaceFromQuery(request, function(results, status) {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
}
name = results[0].name;
loc = results[0].geometry.location;
stations.forEach(st => {
pos = new google.maps.LatLng({
lat: st['lat'],
lng: st['lng']
});
dist = google.maps.geometry.spherical.computeDistanceBetween(
pos,
loc
);
if (dist > limit_dist) {
return;
}
var marker = new google.maps.Marker({
position: pos,
map: map
});
})
console.log(`{lat: ${loc.lat()}, lng: ${loc.lng()}}, // ${name} `);
var marker = new google.maps.Marker({
position: loc,
map: map,
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
},
label: {
text: name,
}
});
map.setCenter(results[0].geometry.location);
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="logic.js"></script>
<style>
section{
height: 100%;
}
/* #map {
width: 50%;
}
#formarea {
width: 25%;
} */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<section class="row">
<div id="map" class="col-sm">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOCGXJzOrwBNxa7tZWvkgzTjEnpz64uPE&callback=initMap&libraries=places,geometry">
</script>
</div>
<div class="col-sm">
<div class="form-group">
<form action="" method="get" id="formarea">
<input type="text" id="locname">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</section>
</body>
</html>
@ryokaji
Copy link
Author

ryokaji commented Oct 19, 2019

sample
example

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment