Skip to content

Instantly share code, notes, and snippets.

@JermaineChiang

JermaineChiang/index.html

Created May 10, 2017 03:11
Show Gist options
  • Save JermaineChiang/898fee386dff2943e4dd7e23b06cf814 to your computer and use it in GitHub Desktop.
Save JermaineChiang/898fee386dff2943e4dd7e23b06cf814 to your computer and use it in GitHub Desktop.
Download ZIP
This is a google map test website....
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Welcome to EzBike!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/myStyle.css">
<style>
#map {
height: 448px;
width: 1000px;
}
</style>
</head>
<body>
<div class="container">
<div class="header row">
<div class="logo span4">
<h1><a href="">Alissa</a> <span>.</span></h1>
</div>
<div class="call-us span8">
<p>Tel: <span>0912 713 533</span> | Line: <span>EzBike@G5.org</span></p>
</div>
</div>
</div>
<div class="coming-soon">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="span12">
<h2>We Are EZBike</h2>
<p>Easy Bike, Easy Life.</p>
</div>
</div>
</div>
</div>
</div>
<header>
<div class="line-top"></div>
<div class="main">
<div class="row-top">
</div>
<div class="box-slider">
<div class="flexslider">
<div class="google">
<div id="map"></div>
</div>
</div>
</div>
</header>
<script>
jQuery(document).ready(function() {
/*
Background slideshow
*/
$('.coming-soon').backstretch([
"images/slider/1.jpg"
, "images/slider/2.jpg"
, "images/slider/3.jpg"
, "images/slider/4.jpg"
, "images/slider/5.jpg"
, "images/slider/6.jpg"
], {duration: 5000, fade: 1050});
});
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: 22.6473000, lng: 120.3014000 },
mapTypeId: 'terrain'
});
var flightPlanCoordinates = [
{ lat: 22.6215410, lng: 120.2745280 },//捷運西子灣站
{ lat: 22.6181580, lng: 120.2787540 },//香蕉碼頭
{ lat: 22.6192820, lng: 120.2785920 },//香蕉棚
{ lat: 22.6242350, lng: 120.2772740 },//鐵道園區天空雲台
{ lat: 22.6199530, lng: 120.2816570 },//駁二藝術特區
{ lat: 22.6184860, lng: 120.2894070 },//真愛碼頭
{ lat: 22.6194630, lng: 120.2901910 },//苓雅寮鐵橋
{ lat: 22.6164440, lng: 120.2926680 },//海洋文化及流行音樂中心
{ lat: 22.6094330, lng: 120.2967940 },//星光水岸公園、新光碼頭
{ lat: 22.6001900, lng: 120.3069200 },//五號船渠
{ lat: 22.5956040, lng: 120.3068580 }//統一夢時代
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor:'#black',
strokeWeight: 3
});
flightPath.setMap(map);
var flightPlanCoordinates2 = [
{ lat: 22.6184860, lng: 120.2894070 },//真愛碼頭
{ lat: 22.6205320, lng: 120.2895240 },//市港河濱公園
{ lat: 22.6224360, lng: 120.2887810 },//高雄市電影館
{ lat: 22.6256540, lng: 120.2881030 },//黃金愛河咖啡座
{ lat: 22.6267370, lng: 120.2868830 },//歷史博物館
{ lat: 22.6274990, lng: 120.2865150 },//高雄市音樂館
{ lat: 22.6403350, lng: 120.2841670 },//中都磚窯廠
{ lat: 22.6466860, lng: 120.2835750 },//中都愛河濕地公園
{ lat: 22.6515640, lng: 120.2962950 },//光之塔
{ lat: 22.6505980, lng: 120.2957750 },//客家文物館
{ lat: 22.6525490, lng: 120.3026960 },//愛河之心
{ lat: 22.6659800, lng: 120.3130750 },//河堤公園
{ lat: 22.6690570, lng: 120.3149350 },//微笑公園
{ lat: 22.6721740, lng: 120.3100350 },//微笑綠園
{ lat: 22.6686800, lng: 120.3020860 }//高雄巨蛋
];
var flightPath2 = new google.maps.Polyline({
path: flightPlanCoordinates2,
geodesic: true,
strokeColor:'pink',
strokeWeight: 3
});
flightPath2.setMap(map);
var flightPlanCoordinates3 = [
{ lat: 22.7030860, lng: 120.2944880 },//高雄國家體育場
{ lat: 22.7015990, lng: 120.3025620 },//捷運世運站
{ lat: 22.6983960, lng: 120.3100680 },//半屏山觀景台
{ lat: 22.6933260, lng: 120.3098380 },//半屏湖濕地公園
{ lat: 22.6875440, lng: 120.3067880 },//環球購物中心新左營車站店
{ lat: 22.6865660, lng: 120.3029470 },//綠二公園
{ lat: 22.6872390, lng: 120.3016750 },//兒童公園
{ lat: 22.6884780, lng: 120.3018210 },//蓮池潭綜合遊樂區
{ lat: 22.6893050, lng: 120.2990480 },//高雄市孔子廟
{ lat: 22.6883770, lng: 120.2974380 },//萬年縣公園
{ lat: 22.6821360, lng: 120.2927290 },//春秋御閣
{ lat: 22.6804480, lng: 120.2924660 },//龍虎塔
{ lat: 22.6801920, lng: 120.2901220 },//拱辰門
{ lat: 22.6800990, lng: 120.2921670 },//蓮池潭旅遊服務中心
{ lat: 22.6788050, lng: 120.2911270 },//龜山登山步道
{ lat: 22.6769430, lng: 120.2914160 },//眷村文化館
{ lat: 22.6750850, lng: 120.2904570 },//鳳儀門
{ lat: 22.6786350, lng: 120.2952310 },//蓮潭滑水主題樂園
{ lat: 22.6796440, lng: 120.2974300 },//高雄市物產館
{ lat: 22.6805540, lng: 120.2982190 },//洲仔濕地生態解說中心
{ lat: 22.6797500, lng: 120.2987520 },//翠華自行車景觀橋
{ lat: 22.6752440, lng: 120.2948340 },//舊左營車站
{ lat: 22.6805510, lng: 120.3012050 },//原生植物園
{ lat: 22.6873810, lng: 120.3074880 }//高鐵新左營站
];
var flightPath3 = new google.maps.Polyline({
path: flightPlanCoordinates3,
geodesic: true,
strokeColor:'blue',
strokeWeight: 3
});
flightPath3.setMap(map);
var flightPlanCoordinates4 = [
{ lat: 22.6249690, lng: 120.3634890 },//大東文化藝術中心
{ lat: 22.6228940, lng: 120.3555200 },//鳳凌廣場
{ lat: 22.6210890, lng: 120.3545000 },//鳳山體育館
{ lat: 22.6248930, lng: 120.3380320 },//中正公園
{ lat: 22.6197680, lng: 120.3395530 },//衛武營都會公園
{ lat: 22.6254840, lng: 120.3339650 },//中正運動場
{ lat: 22.6281840, lng: 120.3280550 },//五塊厝公園
{ lat: 22.6305930, lng: 120.3221090 },//北凱旋公園
{ lat: 22.6293820, lng: 120.3222890 },//南凱旋公園
{ lat: 22.6276290, lng: 120.3173650 },//高雄市文化中心
{ lat: 22.6259590, lng: 120.3208030 },//國立高雄師範大學和平校區
{ lat: 22.6272950, lng: 120.3149070 },//自來水公園
{ lat: 22.6232580, lng: 120.3019020 },//新崛江商圈
{ lat: 22.6237700, lng: 120.3014670 },//大統百貨五福店
{ lat: 22.6247380, lng: 120.2994580 },//中央公園
{ lat: 22.6217340, lng: 120.2974820 },//大立百貨
{ lat: 22.6203250, lng: 120.2916190 },//高雄玫瑰教堂
{ lat: 22.6241930, lng: 120.2910870 },//高雄國賓大飯店
{ lat: 22.6246890, lng: 120.2899720 },//愛河愛之船
{ lat: 22.6313860, lng: 120.3019510 },//捷運美麗島站
{ lat: 22.6308480, lng: 120.3180550 }//大統百貨和平店
];
var flightPath4 = new google.maps.Polyline({
path: flightPlanCoordinates4,
geodesic: true,
strokeColor:'orange',
strokeWeight: 3
});
flightPath4.setMap(map);
var flightPlanCoordinates5 = [
{ lat: 22.6277390, lng: 120.3594870 },//鳳儀書院
{ lat: 22.6272490, lng: 120.3648080 },//大東公園
{ lat: 22.6282660, lng: 120.3646900 },//大東濕地公園
{ lat: 22.6312050, lng: 120.3581980 },//鳳山火車站
{ lat: 22.6350500, lng: 120.3352320 },//正道公園
{ lat: 22.6404770, lng: 120.3224640 },//國立科學工藝博物館
{ lat: 22.6374420, lng: 120.3085260 },//建國二路電腦街
{ lat: 22.6397620, lng: 120.3021070 },//高雄車站
{ lat: 22.6305930, lng: 120.3221090 },//北凱旋公園
{ lat: 22.6293820, lng: 120.3222890 },//南凱旋公園
{ lat: 22.6260690, lng: 120.3222550 },//國立高雄師大附中
{ lat: 22.6081010, lng: 120.3257720 },//高雄輕軌前鎮機廠
{ lat: 22.6042460, lng: 120.3242340 },//輕軌籬仔內站
{ lat: 22.5993750, lng: 120.3204740 },//凱旋高空侏儸紀樂園
{ lat: 22.5995040, lng: 120.3198020 },//輕軌凱旋瑞田站
{ lat: 22.5990060, lng: 120.3197920 },//凱旋觀光夜市
{ lat: 22.5955450, lng: 120.3153960 },//輕軌前鎮之星站
{ lat: 22.5936190, lng: 120.3105690 },//輕軌凱旋中華站
{ lat: 22.5956040, lng: 120.3068580 }//統一夢時代
];
var flightPath5 = new google.maps.Polyline({
path: flightPlanCoordinates5,
geodesic: true,
strokeColor:'green',
strokeWeight: 3
});
flightPath5.setMap(map);
var flightPlanCoordinates6 = [
{ lat: 22.6684400, lng: 120.3458410 },//澄清湖
{ lat: 22.6546920, lng: 120.3464440 },//高雄圓山飯店
{ lat: 22.6503510, lng: 120.3500320 },//正修科技大學
{ lat: 22.6522270, lng: 120.3511170 },//鳥松濕地教育公園
{ lat: 22.6509380, lng: 120.3573480 },//勞工公園
{ lat: 22.6546000, lng: 120.3590440 },//澄清湖棒球場
{ lat: 22.6643480, lng: 120.3549010 },//湖岸新境
{ lat: 22.6640760, lng: 120.3526140 },//三亭攬勝
{ lat: 22.6666350, lng: 120.3501100 },//澄清湖青年活動中心
{ lat: 22.6907641, lng: 120.3384977 },//八卦休閒公園
{ lat: 22.6727060, lng: 120.3270720 },//檨仔林埤溼地公園
{ lat: 22.6669800, lng: 120.3262700 },//金獅湖
{ lat: 22.6668800, lng: 120.3282360 }//獅山公園
];
var flightPath6 = new google.maps.Polyline({
path: flightPlanCoordinates6,
geodesic: true,
strokeColor:'yellow',
strokeWeight: 3
});
flightPath6.setMap(map);
//如果瀏覽器不支援地理定位 使用預設位置
var taipei = new google.maps.LatLng(25.08, 121.45);
if(window.navigator.geolocation){
var geolocation=window.navigator.geolocation;
geolocation.getCurrentPosition(getPositionSuccess);
getPositionSuccess(position);
}else{
alert("你的瀏覽器不支援地理定位");
map.setCenter(taipei);
}
function getPositionSuccess(position){
myPosition = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
//定位到目前位置
map.setMap(map);
}
var marker=new google.maps.Marker({
position:myPosition,
icon:'images/JJ.png'
});
marker.setMap(map);
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBx_RrWBsIEeFElhLd9RlhNQxXov8ZwdvQ&callback=initMap">
</script>
<script src="Scripts/jquery.backstretch.min.js"></script>
<script src="Scripts/jquery.countdown.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment