http://www.w3schools.com/googleapi/google_maps_overlays.asp
https://developers.google.com/maps/documentation/javascript/markers?hl=zh-tw
https://developers.google.com/maps/documentation/javascript/symbols?hl=zh-tw
example 1:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(51.508742,-0.120850),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3
},
});
marker.setMap(map);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(52,-0.120850),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 3
},
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
example 2:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(25.03174,121.5297);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var image1 = {url : "http://labs.google.com/ridefinder/images/mm_20_yellow.png", size : new google.maps.Size(32, 32)};
var image2 = {url : "http://labs.google.com/ridefinder/images/mm_20_red.png", size : new google.maps.Size(32, 32)};
var marker=new google.maps.Marker({
position:new google.maps.LatLng(24.9785,121.41),
icon: image1
});
marker.setMap(map);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(24.988,121.412),
icon: image1
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:800;height:900px;"></div>
</body>
</html>
example 3:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(22.595090, 120.359171);
var coordinates = [[22.5805149,120.4227832,'大連化學','image3'],[22.5789818,120.3178123,'建榮冷凍食品','image2']];
function initialize()
{
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var image1 = {url : "http://labs.google.com/ridefinder/images/mm_20_red.png", size : new google.maps.Size(32, 32)};
var image2 = {url : "http://labs.google.com/ridefinder/images/mm_20_yellow.png", size : new google.maps.Size(32, 32)};
var image3 = {url : "http://labs.google.com/ridefinder/images/mm_20_green.png", size : new google.maps.Size(32, 32)};
var idx;
for (idx=0; idx<coordinates.length; idx++) {
var str = "var marker=new google.maps.Marker({ position:new google.maps.LatLng(" + coordinates[idx][0] + "," + coordinates[idx][1] + "), title: '" + coordinates[idx][2] + "', icon:" + coordinates[idx][3] + " }); marker.setMap(map);"
eval(str);
}
//var marker=new google.maps.Marker({
// position:new google.maps.LatLng(22.5805149,120.4227832),
// title: '大連化學工業股份有限公司',
// icon: image3
//});
//marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$("#from").datepicker("option", "dateFormat", "yy/mm/dd");
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
$("#to").datepicker("option", "dateFormat", "yy/mm/dd");
});
</script>
</head>
<body>
<label for="分公司">分公司</label>
<input type=text id=txt1> </input>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<input type=button id=btn1 value=提交> </input>
<div id="googleMap" style="width:800;height:900px;"></div>
</body>
</html>
沒有留言:
張貼留言