[Web] Tìm kiếm địa điểm với Google Maps

Tấn Việt

Tôi lập trang web này để thỏa mãn sở thích viết cái gì đó vui vui khi rãnh rỗi và đồng thời cũng chia sẻ những gì tôi biết hoặc đọc đâu đó trên mạng về Lập trình web. Tôi hi vọng những bài viết này sẽ giúp ích cho các bạn. Thân ái!

You may also like...

3 Responses

  1. quang tiến says:

    thanks bạn, bài viết rất có ý nghĩa

  2. Kiều Bình Hòa says:

    bạn ơi. có chức năng tìm kiếm nào như của google maps ko? khi bạn nhấn vào địa chỉ nó sẽ trượt tới vị trí mình ấy?

    • Tấn Việt says:

      Tất nhiên là có chứ bạn. Trong bài viết này mình chỉ giới thiệu cách tìm địa chỉ với Google Maps, còn những hiệu ứng như bạn nói thì mình sẽ đề cập trong những bài viết sau. Thân ái!

  3. huy says:

    a ơi cho em hỏi về cái này
    em đang làm ứng dụng tra cứu địa điểm du lịch, em đã tạo 1 database và nhập tất cả các dữ liệu về các địa điểm du lịch như khách sạn, nhà hàng, quán coffee vào. Em đưa thông tin kết nối database ra một file riêng biệt CSDL.php

    Sau đó em xuất chúng ra xml để Bản đồ có thể lấy dữ liệu thông qua các cuộc gọi JavaScript không đồng bộ.

    createElement(“markers”);
    $parnode = $dom->appendChild($node);

    $connection=mysql_connect (localhost, $username, $password);
    if (!$connection) { die(‘Not connected : ‘ . mysql_error());}

    $db_selected = mysql_select_db($database, $connection);
    mysql_query(“SET NAMES utf8”);
    if (!$db_selected) {
    die (‘Can\’t use db : ‘ . mysql_error());
    }
    $bien=$_POST[TIT];
    $query = “SELECT * FROM markers where name like ‘%$bien%’ or address like ‘%$bien%'”;
    $result = mysql_query($query);
    if (!$result) {
    die(‘Invalid query: ‘ . mysql_error());
    }
    header(“Content-type: text/xml”);
    while (($row = mysql_fetch_array($result))){

    $node = $dom->createElement(“marker”);
    $newnode = $parnode->appendChild($node);
    $newnode->setAttribute(“name”, $row[‘name’]);
    $newnode->setAttribute(“address”, $row[‘address’]);
    $newnode->setAttribute(“lat”, $row[‘lat’]);
    $newnode->setAttribute(“lng”, $row[‘lng’]);
    $newnode->setAttribute(“type”, $row[‘type’]);
    }
    echo $dom->saveXML();

    ?>

    Kế tiếp em code đoạn này để đưa các địa điểm trong database ra bản đồ google map:

    Bản đồ du lịch thành phố Đà Nẵng

    //<![CDATA[

    var customIcons = {
    khachsan: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png&#039;
    },
    cf: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png&#039;
    },
    nhahang: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png&#039;
    }
    };

    function load() {
    var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(16.049855,108.222045),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.SATELLITE
    });
    var infoWindow = new google.maps.InfoWindow;

    // Change this depending on the name of your PHP file
    downloadUrl("xuat_xml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var type = markers[i].getAttribute("type");
    var point = new google.maps.LatLng(
    parseFloat(markers[i].getAttribute("lat")),
    parseFloat(markers[i].getAttribute("lng")));
    var html = "” + name + “ ” + address;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon
    });
    bindInfoWindow(marker, map, infoWindow, html);
    }
    });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, ‘click’, function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
    });
    }

    function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
    new ActiveXObject(‘Microsoft.XMLHTTP’) :
    new XMLHttpRequest;

    request.onreadystatechange = function() {
    if (request.readyState == 4) {
    request.onreadystatechange = doNothing;
    callback(request, request.status);
    }
    };

    request.open(‘GET’, url, true);
    request.send(null);
    }

    function doNothing() {}

    //]]>

    Tìm kiếm địa điểm

    Tìm đường đi

    và giờ cho em hỏi là giờ em muốn làm chức năng tìm kiếm 1 địa điểm bất kì trong database và chỉ hiện 1 mình nó ra khi load bản đồ thì phải làm sao ạ?
    thank anh nhiều!

Leave a Reply

Your email address will not be published. Required fields are marked *