<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>google Map地圖-建立地標</title>
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<script src="jquery.mobile-1.4.2/jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
#googleMap {
margin: 0 auto;
width: 640px;
height: 480px;
border: 5px solid #FFF;
border-radius: 5px;
box-shadow: 2px 2px 2px 2px #666;
}
</style>
<script language="Javascript">
$(function(){
// 以該點為中心顯示地圖
var map01 = document.getElementById("googleMap");
// 取得目前定位點（可以先到google地圖找到目的地的經緯度（按滑鼠右鍵→這是哪裡，即可取得）
var latlng1 = new google.maps.LatLng(25.017500, 121.539561);
var gmap = new google.maps.Map(map01, {
zoom:14,
center: latlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// 建立地標
var marker=new google.maps.Marker({
position: latlng1,
icon:"images/myicon.png",
map: gmap,
title: "台灣大學"
});
// 觸碰地標
google.maps.event.addListener(marker, "click", function(event) {
var infowindow = new google.maps.InfoWindow({
content: '<div>' + "台灣大學校本部" + "</div>"
});
infowindow.open(gmap,marker);
})
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content" id="googleMap"></div>
</div>
</body>
</html> |