136 lines
5.3 KiB
HTML
136 lines
5.3 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100% ;width: 100%; padding : 0;margin: 0;">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=11" />
|
|
<meta name="viewport" content="initial-scale=1.0">
|
|
<meta charset="utf-8">
|
|
<head>
|
|
|
|
<script type="text/javascript">
|
|
function gob(e)
|
|
{
|
|
if(typeof(e)=='object')
|
|
return(e);
|
|
if(document.getElementById)
|
|
return(document.getElementById(e));
|
|
return(eval(e))
|
|
}
|
|
|
|
var polylines = [];
|
|
var carMarker;
|
|
var lineColor = [];
|
|
var color1;
|
|
var center_last = null;
|
|
|
|
function initmap()
|
|
{
|
|
geocoder = new google.maps.Geocoder();
|
|
// LONDON 51.5037856,-0.1169808
|
|
// TOKYO 35.681382, 139.766084
|
|
// TOKYO TOWER 35.6585848,139.7432389
|
|
|
|
var myOptions = {
|
|
zoom: 16,
|
|
center: new google.maps.LatLng(35.6585209,139.7453273),
|
|
zoomControl:true,
|
|
draggableCursor: 'default',
|
|
draggingCursor: 'pointer',
|
|
scaleControl: true,
|
|
scrollwheel: true,
|
|
controlSize: 25,
|
|
mapTypeControl: true,
|
|
mapTypeControlOptions: {
|
|
mapTypeIds: [
|
|
"roadmap",
|
|
"satellite",
|
|
"terrain",
|
|
"hybrid"
|
|
]
|
|
},
|
|
rotateControl: false,
|
|
streetViewControl: true,
|
|
fullscreenControl: false
|
|
};
|
|
|
|
map = new google.maps.Map(gob('map_canvas'),myOptions);
|
|
}
|
|
function moveToMap(Latitude, Longitude) {
|
|
var center = new google.maps.LatLng(Latitude, Longitude);
|
|
if(!carMarker)
|
|
{
|
|
carMarker = new google.maps.Marker({ position: center,
|
|
map: map,
|
|
zIndex: 999,
|
|
icon: 'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAFS0lEQVRIiZWWaWxVRRTHf29vS2lL2QzG0rTUihRcalWIiEQDRIJUI2GLISTGiApqIiiIkCgRlA+WCNFGlkQQQmhAPtRgYg0Uy1KLgBawQilLwEKhLKWvb7l3xsy8+/C9ex+0/JOTuTPnzPnfc2bmzLiw4cwo+8htlACvAWVAAZBrKdqB08DvwMbBdbLRMTMBLleM0kHcMtJhOxBYAbwKZDq0ybgFVAEf5e+TlxzauxE3P5XUfRZYCxSpjrtXFr7iUrxDRkAgXYu41ka0+S/MpkNSdt2K+zsJvF5wQNb2mPhk2e3PMcA2oL/L5yfj+SlkTn8fz+ChCCGQUuo2LtGW44SrVhPds0NiRpXfNmDKkHq5p0fETaW6GQrsVJG6s/uSO28l6eOmxUhCQaKt53Srf8AXgH6DkF6/7kd+3UZ07VIhb91wW5FPfrBBnrATe+3EpqmbJYpURZo7N0YaudDC1RVvEz15FHf/+3FnZiMB0XEd0XYBT0EJ/rlf4hpdjssQbmP1AolpFFm+pjtSbh9oHM5zwC4gkDV5Nn0XrtaRXF4wFf+IkfSaMgehCBPSLEyDrqpKjMaD+BdVxlK/ZhGiRq0UYWDCsD/l7sSI3Y6IBeWmICDTMsmc9o52YoaCdNbvJn3SLEwpMU0zWYTEM2EGkSN12laNyYmzMH1pQvlSPu08TmKTMpVu39An8OYVEb1xjRvVW3APKkT405yklghfADkgn3DNDkyV/vsGIwoecStfyqedx7nGBnlakR/bvedmjCZ68azWnR01wG7uQPTkElxbK/GuqcYcVIg8clCZ5PUk4j56g/XK0ZFkv7UU6697LK6Z78WykN47PqdPT4hDytgIhfRkb0ExwuUj9/N1ZEx9847knvLZ+BZWYLp8yAcKdbaMUDiuD3WfapMrQN9w67+xycEgwpuGb3gZRjgSP25OFJXAQ48iPH49RxmKK22ImP2VbokNk+NAccfhBvpZGydys4Mzk55GhsPos5QCHcvm4/IHkKEu3KbQxNG/G5Ex4uM9iVjV15e7mk/RXrWRwIjSWJS3gmSMHU/WnPlIfX6tkimF7nd+V0H0txrtQ7g9mD/vxDgX25QXTRrj5zcOj514ZhpNUlIuJf2il1rp/dIUhGHizSsk/cVX8BYWIzN6/S/plvTORuDGNewxXMMfJ7Lua0T7VYKCCx/fZPM1ScBKuc6Zo3JVZ+tmMfCp0meOHcfA5asQ1qWgd2ti1bKJir5r+ScY+/XFJBsNNn/YyVbLfXM87Y6Ip/tASmqlpERKHg6fbqbr6GF8RcWQnZNEpCtUwi1ltDQTXLkMo36/8kGryb55QSoT3KuoW1JG/GP67U/1ADgA5KuOOyubjBfGk/bMGPylZUk/EG6oJ1JXS2RPDbKjQ08OweXPwnxwTHA9cQsBP6Uk3h5I6s4AvrdnxtN/AK6cHJ0a0d6u1zIREsRewVcVUZLuYiAI6B3o2NUi+bhsBsYBs5JsLl0GJXfARcnuCsNBSuJ57o5YYT7wpPU46BZdcH6NYEMKOxVtU7zjKJmK2CZtQrBYLWUKXZKYgug+waYmyQ2bW1UyG6w2NbHajSlku5SsTzGeJOclv1RK9ttcqjX5A5J/xkF8Fyy2HKREJzR/A5sSdF3AMUDdi1ftc+6FuN16P3XaFQJCdfBDC3RYlek8sNd66KfEvRArVAPf2gfPwq4NsTVUZ/YQcMR6a90RjnO85U6WyVCFRT/9O+CfN+DdGD+n1CPEYZ0C9xpxHPNUdBJu1sIXwP4tcGJLD0kVHOe4h6gHVql0TYT1ExMmqdp9N+jrEfgP4vQlN0VUoHYAAAAASUVORK5CYII='
|
|
});
|
|
}
|
|
else
|
|
{
|
|
carMarker.setPosition(center);
|
|
}
|
|
map.panTo(center);
|
|
}
|
|
|
|
function clearPath()
|
|
{
|
|
if(polylines.length > 0)
|
|
{
|
|
for(var idx in polylines) {
|
|
var polyline = polylines[idx]
|
|
polyline.setMap(null);
|
|
}
|
|
polylines = []
|
|
}
|
|
if(carMarker)
|
|
{
|
|
carMarker.setMap(null);
|
|
carMarker = null;
|
|
}
|
|
}
|
|
function clearCarMarker()
|
|
{
|
|
if(carMarker)
|
|
{
|
|
carMarker.setMap(null);
|
|
carMarker = null;
|
|
}
|
|
}
|
|
function drawPaths(pathArray)
|
|
{
|
|
var first = null;
|
|
clearPath();
|
|
for(var idx in pathArray) {
|
|
var path = pathArray[idx];
|
|
if(first == null) {
|
|
first = path[0];
|
|
}
|
|
if(path.length > 1) {
|
|
polyline = new google.maps.Polyline({map: map,
|
|
path: path,
|
|
strokeColor: "#FF0000",
|
|
strokeOpacity: 0.7,
|
|
strokeWeight: 4
|
|
});
|
|
polylines.push(polyline);
|
|
}
|
|
}
|
|
if(first != null)
|
|
{
|
|
//alert(first["lat"]);
|
|
var center = new google.maps.LatLng(first["lat"], first["lng"]);
|
|
map.panTo(center);
|
|
}
|
|
}
|
|
</script>
|
|
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7ujCOO5j5VAx5Ae1_lvakQGmU0-GvArI&sensor=false®ion=JP&language=ja&callback=initmap"async defer></script>
|
|
</head>
|
|
|
|
<!-- -->
|
|
<body oncontextmenu="return false;" style="width: 100%; height: 100%; padding : 0;margin: 0;">
|
|
<div id="map_canvas" style="overflow-x:hidden; overflow-y:hidden; width: 100%; height: 100%; padding : 0;margin: 0;"></div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|