Карты Google в MVC 4

Последнее обновление: 1.11.2015

Возможно, многие из нас пользовались картами Google, где легко можно отыскать нужное место или ненужное. И довольно было бы неплохо инкорпорировать подобную функциональность на наш сайт. Это мы можем сделать, использовав соответсвующий api, который предоставляет Google.

Итак, создадим проект по шаблону Basic и назовем его, например, GoogleMaps. Пусть наше приложение будет отображать на карте Москвы некоторые станции метро. В реальности можно поставить более производственную задачу, например, у нас сайт сети магазинов, и нам надо выводить на карте маркерами все точки данной сети. Но для примера я буду выводить на карте несколько станций метро.

Вначале добавим в папку Models следующую модель Station:

public class Station
{
    public int Id { get; set; }
    public string PlaceName { get; set; } // название места
    public double Traffic { get; set; } // пассажиропоток
    public string Line { get; set; } // линия метро
    public double GeoLong { get; set; } // долгота - для карт google
    public double GeoLat { get; set; } // широта - для карт google
}

Думаю, тут все понятно. Последние два свойства GeoLong и GeoLat нужны нам, чтобы api googla связывал данный объект Station с определенным местом на карте по широте и долготе. Теперь добавим в папку Controllers простой контроллер HomeController со следующим содержанием:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;
using GoogleMaps.Models;

namespace GoogleMaps.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetData()
        {
            // создадим список данных
            List<Station> stations = new List<Station>();
            stations.Add(new Station() { Id = 1, PlaceName = "Библиотека имени Ленина", GeoLat = 37.610489, 
										GeoLong = 55.752308, Line = "Сокольническая", Traffic = 1.0 });
            stations.Add(new Station() { Id = 2, PlaceName = "Александровский сад", GeoLat = 37.608644, 
									GeoLong = 55.75226, Line = "Арбатско-Покровская", Traffic = 1.2 });
            stations.Add(new Station() { Id = 3, PlaceName = "Боровицкая", GeoLat = 37.609073, 
								GeoLong = 55.750509, Line = "Серпуховско-Тимирязевская", Traffic = 1.0 });
            
            return Json(stations, JsonRequestBehavior.AllowGet);
        }
    }
}

Для простоты примера я не стал создавать контекст данных, базу данных, а просто определяю весь необходимый список объектов в действии контроллера. У нас здесь два действия: Index просто возвращает обычное представление, а метод GetData посылает в ответ сериализованный в объекты json список станций.

И теперь создадим представление Index.cshtml для соответствующего действия контроллера:

@{
    ViewBag.Title = "Home Page";
}

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

<style>
.stationInfo {
    height: 150px;    
    width: 250px;
}
</style>

<div id="canvas" style="height: 600px; width:600px;"></div>

<!--Устанавливаем секцию scripts, которая затем будет рендериться на мастер-странице -->
@section scripts {
<script type="text/javascript">

    $(document).ready(function () {
        GetMap();
    });

    // Функция загрузки
    function GetMap() {

        google.maps.visualRefresh = true;
        // установка основных координат
        var Moscow = new google.maps.LatLng(55.752622, 37.617567);

        // Установка общих параметров отображения карты, как масштаб, центральная точка и тип карты
        var mapOptions = {
            zoom: 15,
            center: Moscow,
            mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
        };

        // Встраиваем гугл-карты в элемент на странице и получаем объект карты
        var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);

        // Настраиваем красный маркер, который будет использоваться для центральной точки
        var myLatlng = new google.maps.LatLng(55.752622, 37.617567);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Станции метро'
        });

        // Берем для маркера иконку с сайта google
        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')

        // Получаем данные
        $.getJSON('@Url.Action("GetData","Home")', function (data) {
            // Проходим по всем данным и устанавливаем для них маркеры
            $.each(data, function (i, item) {
                var marker = new google.maps.Marker({
                    'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
                    'map': map,
                    'title': item.PlaceName
                });

                // Берем для этих маркеров синие иконки с сайта google
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')

                // Для каждого объекта добавляем доп. информацию, выводимую в отдельном окне
                var infowindow = new google.maps.InfoWindow({
                    content: "<div class='stationInfo'><h2>Станция " + item.PlaceName + "</h2><div><h4>Линия метро: "
                        + item.Line + "</h4></div><div><h4>Пассажиропоток: " + item.Traffic + " млн. человек</h4></div></div>"
                });

                // обработчик нажатия на маркер объекта
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
            })
        });
    }
</script>
}

Вначале мы подключаем необходимый для работы файл с кодом javascript.

Затем устанавливаем стили для класса stationInfo - этот класс будет использоваться для стилизации окна, которое будет выводить информацию о станции метро.

Элемент <div id="canvas" style="height: 600px; width:600px;"></div> как раз и будет представлять область, куда будет выводиться карта google.

Поскольку предполагается, что представление будет использовать мастер-страницу, где есть секция scripts, то мы определим эту секцию в представлении. В скрипте функция jQuery вызывает функцию GetMap(), которая и содержит весь функционал.

Вначале мы настраиваем основной объект, который будет отображаться на карте и связанные с ним параметры:

google.maps.visualRefresh = true;
// установка основных координат
var Moscow = new google.maps.LatLng(55.752622, 37.617567);

// Установка общих параметров отображения карты, как масштаб, центральная точка и тип карты
var mapOptions = {
    zoom: 15,
    center: Moscow,
    mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
};

// Встраиваем гугл-карты в элемент на странице и получаем объект карты
var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);

// Настраиваем красный маркер, который будет использоваться для центральной точки
var myLatlng = new google.maps.LatLng(55.752622, 37.617567);

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Станции метро'
});

// Берем для маркера иконку с сайта google
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')

Во второй части функции обращаемся к действию GetData и загружаем данные, определенные к методе контроллера:

// Получаем данные
$.getJSON('@Url.Action("GetData","Home")', function (data) {
    // Проходим по всем данным и устанавливаем для них маркеры
    $.each(data, function (i, item) {
        var marker = new google.maps.Marker({
            'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
            'map': map,
            'title': item.PlaceName
        });

        // Берем для этих маркеров синие иконки с сайта google
        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')

        // Для каждого объекта добавляем доп. информацию, выводимую в отдельном окне
        var infowindow = new google.maps.InfoWindow({
            content: "<div class='stationInfo'><h2>Станция " + item.PlaceName + "</h2><div><h4>Линия метро: "
                + item.Line + "</h4></div><div><h4>Пассажиропоток: " + item.Traffic + " млн. человек</h4></div></div>"
        });

        // обработчик нажатия на маркер объекта
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    })
});

После получения координат на карте new google.maps.LatLng(item.GeoLong, item.GeoLat) устанавливаем синие маркеры для объектов на карте и для каждого объекта создаем свое окно infowindow, в котором будет выводиться связанная информация:

Запустив проект на выполнение, мы сможем использовать наши объекты и получать по ним переданные сведения.

Таким образом, мы можем задействовать в нашем приложении функциональность карт от Google.

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850