Поиск на сайте
Главная Журнал Форум Wiki DRKB Страны мира

Использование Google Maps API в ASP.NET

Итак, давайте посмотрим, как можно сделать простую страницу в ASP.NET, на которой пользователь сможет выбрать компанию и увидеть её месторасположение на карте Гугла. Для начала необходимо сгенерировать ключ доступа к Google Maps API. На странице регистрации регистрации достаточно ввести адрес Вашего сайта и нажать на кнопку генерации ключа внизу страницы. После этого Вы увидите сгенерированный ключ, который можно использовать на любой странице сайта.

Итак создадим саму страницу:

<%@ Page Language="C#"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script src="http://maps.google.com/maps?file=api&v=2&key=<key here>&sensor=false"  type="text/javascript"></script> <!-- замените "key here" на сгенерированный ключ --> 
    <script type="text/javascript">
    var map;
    var geocoder;
    function initialize() {
        if (GBrowserIsCompatible()) {  // Если браузер поддерживает Google Maps API
            map = new GMap2(document.getElementById("map"));   // создаём карту в тэге DIV с именем map. Он выступает в роли контейнера
            map.setCenter(new GLatLng(17, 83), 5);  // устанавливаем начальные координаты и увеличение 5
            map.setUIToDefault();
        }
    }
 
    function showAddress(addresess)
        geocoder = new GClientGeocoder();
        // получаем точку GLatLng для данного адреса
        geocoder.getLatLng( 
                address,   // адрес для просмотре 
                function (point) {  // callback-функция для обработки результата
                    if (!point) {  // если адрес не найден
                        alert("Sorry the given address ["  +   address +  "] was not found!");
                    }
                    else {
                        //  точка содержащаю долготу и широту
                        map.setCenter(point, 15);  // центрируем карту на этой точке
                        var marker = new GMarker(point);  
                        map.addOverlay(marker);   // отображаем маркер на точке карты
                        marker.openInfoWindow(address);  // показываем адрес в окошке
                    }
                }
            );
     }
                
     function findAddress() {
                var ddl = document.getElementById("ddlCompanies");  
                var address = ddl.options[ddl.selectedIndex].value;  // берём выбранный адрес из выпадающего списка
                showAddress(address); 
                return false;   // avoid postback
     }
    </script>
</head>
<body  onload="initialize()" onunload="GUnload()">
    <form id="form1" runat="server">
    Select Person : 
    <asp:DropDownList ID="ddlCompanies" runat="server">
        <asp:ListItem Value="Microsoft Corporation, One Microsoft Way, Redmond, WA 98052-7329,USA">Microsoft Corporation</asp:ListItem> 
        <asp:ListItem Value="1600 Amphitheatre Parkway, Mountain View, CA 94043">Google Inc.</asp:ListItem> 
        <asp:ListItem Value="500 Oracle Parkway,Redwood Shores, CA 94065">Oracle Corporation</asp:ListItem> 
        <asp:ListItem Value="One Dell Way,Round Rock, Texas 78682,United States">Dell Inc.</asp:ListItem> 
    </asp:DropDownList>
    <asp:Button ID="btnGetAddress" runat="server" Text="Get Address"  OnClientClick="return findAddress()"/>
    <p />
    <div id="map"  style="width:800px;height:600px">
    </div>
    </form>
</body>body>
</html>

В данном примере использована только часть Google Maps API. Более подробное описание можно почитать здесь. Кстати уже вышла в свет третья версия API гугловских карт, подробнее о которой можно узнать тут.

Как это работает можно увидеть на следующем скриншоте:




Основные разделы сайта


 

Реклама Смотрите описание купальники оптом тут.