Study Journals of TYRuan: Google Maps API example

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>

Study Journals of TYRuan

標籤

2016年2月2日星期二

Google Maps API example

沒有留言:

張貼留言

網誌存檔

標籤

2016年2月2日 星期二

Google Maps API example

沒有留言:

張貼留言

網誌存檔

2016年2月2日星期二