Hướng dẫn cách dùng Google Map API

1
717
views
huong dan su dung google map api viettut blog
huong dan su dung google map api viettut blog

Hướng dẫn cách dùng Google Map API

Hôm nay mình xin hướng dẫn các bạn cách dùng Google Map API. Để hiển thị vị trí của một nơi nào đó cần biết cặp kinh độ vĩ độ của nó. Ví dụ Hà Nội (21.028333,105.853333) hoặc có thể tự động bắt vị trí hiện tại của người dùng

Code HTML

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
     }
    </style>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Code JAVASCRIPT

Trước hết cần include hai thư viện là jquerygoogle api :

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    

<script type="text/javascript">
  var map;

  function initialize() {
    var mapOptions = {
      zoom: 15,
      center: new google.maps.LatLng(21.028333,105.853333),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById(''map-canvas''), mapOptions);
  }

  $(document).ready(function() {
    initialize();\n      });

</script>    

zoom : cao nhất là 15, càng cao thì nhìn sẽ rõ đường hơn.

Có thể thêm icon mỏ neo đánh dấu nơi mình muốn hiển thị như sau :

var map;

function initialize() {
  var myLatlng  = new google.maps.LatLng(21, 105);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(
    document.getElementById(''map-canvas''),
    mapOptions
  );

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: ''I am here''
  });
}

Hoặc có thể thêm hộp message box như sau :

var map;

function initialize() {
  var myLatlng  = new google.maps.LatLng(21, 105);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(
    document.getElementById(''map-canvas''),
    mapOptions
  );

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: ''viettut.com''
  });
  var info = new google.maps.InfoWindow({
    content: ''<p>Thông tin chi tiết !</p>''
  });
  info.open(map, marker);
}    

Trong phần nội dụng của message box bạn có thể dùng code HTML để điều chỉnh giao diện của nó.

1 BÌNH LUẬN

BÌNH LUẬN

Please enter your comment!
Please enter your name here