Hướng dẫn sử dụng Google Map API


Hôm nay mình xin hướng dẫn các bạn sử 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)

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>

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ó.

Bình luận (0)

Bình luận (<{ numberComments }>)

  • avatar
    <{ comment.author.username }> Reply
    <{ comment.createdAt | date:'yyyy-MM-dd HH:mm:ss' }>
    • avatar
      <{ reply.author.username }>
      <{ reply.createdAt | date:'yyyy-MM-dd HH:mm:ss' }>