mirror of
https://github.com/jlengrand/isochrone-with-google-map.git
synced 2026-03-10 08:21:23 +00:00
124 lines
4.8 KiB
HTML
124 lines
4.8 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
|
<title>Generate an isochrone with Google Map API</title>
|
|
<!-- my_api_key: ABQIAAAAjqVoDXyBp6bfqyuv3AlI2BQrEibgys9Q7xis9OGN0SpCcELUwxSfkRscSsUpjh2N_fO_eU-pexEzGA -->
|
|
<script src="http://maps.google.com/maps?file=api&v=2.x&key=#{your-api-key}" type="text/javascript"></script>
|
|
<script src="jquery.js" type="text/javascript"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var map = null;
|
|
var geocoder = null;
|
|
var directionsPanel = null;
|
|
var directions = null;
|
|
var inc_x = 0.01;
|
|
var inc_y = 0.01;
|
|
var x = 0.01;
|
|
var y = 0.01;
|
|
var m = 0;
|
|
var intval = null;
|
|
var slice = (2*Math.PI)/10;
|
|
var start_s = 0;
|
|
var prev_meas = 0;
|
|
var prev_dest = null;
|
|
var points = new Array();
|
|
var found = 0;
|
|
|
|
function initialize() {
|
|
if (GBrowserIsCompatible()) {
|
|
map = new GMap2(document.getElementById("map_canvas"));
|
|
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
|
|
geocoder = new GClientGeocoder();
|
|
directionsPanel = document.getElementById("map_text");
|
|
directions = new GDirections(map, directionsPanel);
|
|
}
|
|
}
|
|
|
|
function crawlpoint(px,py,mins){
|
|
var point = new GPoint(px,py);
|
|
var destpoint = new GPoint(px + x,py + y);
|
|
|
|
directions.loadFromWaypoints(new Array(point.y + "," + point.x ,destpoint.y + "," + destpoint.x),{preserveViewport:true});
|
|
x = x + (inc_x * Math.sin(start_s));
|
|
y = y + (inc_y * Math.cos(start_s));
|
|
m = m + 1;
|
|
|
|
if (directions.getNumRoutes() > 0){
|
|
document.getElementById('txt1').value = 'y' + document.getElementById('txt1').value
|
|
var curr_meas = directions.getDuration().seconds/60;
|
|
if (prev_meas <= mins && curr_meas > mins ){
|
|
map.addOverlay(new GMarker(prev_dest,{title:'Distance: ' + directions.getDuration().html}));
|
|
found = 1;
|
|
}else{
|
|
prev_dest = destpoint;
|
|
prev_meas = curr_meas;
|
|
}
|
|
|
|
if(curr_meas > (mins + (mins * 0.4)) || (m > 20 && found ==1) || m > 50){
|
|
points.push(new GLatLng(prev_dest.y, prev_dest.x));
|
|
start_s = start_s + slice;
|
|
x = inc_x;
|
|
y = inc_y;
|
|
m = 0;
|
|
found = 0;
|
|
prev_meas = 0;
|
|
curr_meas = 0;
|
|
prev_dest = point;
|
|
directions.clear();
|
|
|
|
if(start_s >= (2*Math.PI)){
|
|
start_s = 0;
|
|
//map.addOverlay(new GPolygon(points, "#f33f00", 5, 1, "#ff99aa", 0.2));
|
|
$('#loader').hide();
|
|
clearInterval(intval);
|
|
}
|
|
}
|
|
|
|
|
|
}else{
|
|
document.getElementById('txt1').value = 'n' + document.getElementById('txt1').value
|
|
}
|
|
}
|
|
|
|
function isocrona(address,minutes) {
|
|
if (geocoder) {
|
|
geocoder.getLatLng(
|
|
address,
|
|
function(point) {
|
|
if (!point) {
|
|
alert(address + " not found");
|
|
} else {
|
|
map.setCenter(point, 10);
|
|
prev_dest = point;
|
|
$('#loader').show();
|
|
intval = setInterval( "crawlpoint(" + point.x + "," + point.y + "," + minutes +")", 3000);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body style="margin:0px; padding:0px; background: #DDDDDD;" onload="initialize()" onunload="GUnload()">
|
|
<center>
|
|
<div style="padding-top: 4px; padding-bottom: 4px;">
|
|
<label for="geolocation"/>Location: </label>
|
|
<input type="text" id="geolocation" name="geolocation" size="60" value="Nantes"/>
|
|
<label for="minutes"> Minutes: </label>
|
|
<input type="text" id="minutes" name="minutes" size="3" maxlength="2" value="10"/>
|
|
<input type="submit" value="Generate Isochrone"
|
|
onclick="this.value='Generating... it takes 2-5 mins';isocrona(document.getElementById('geolocation').value,document.getElementById('minutes').value)"/>
|
|
<img id="loader" src="loader.gif" style="display:none;"/>
|
|
</div>
|
|
<div id="map_canvas" style="width:70%; height:800px; border: 3px solid rgb(51, 51, 51);"></div>
|
|
<div style="padding-top: 10px;">
|
|
Specify a location and a time interval in minutes, click on 'generate isochrone' and watch the script work :) <br/>
|
|
for more information please look at the official homepage.
|
|
</div>
|
|
</center>
|
|
<textarea id="txt1" style="display:none;"></textarea>
|
|
<div id="map_text" style="width:30%; height:800px; float: left; display:none;"></div>
|
|
</body>
|
|
</html> |