Carte Google Map avec un marker et des markers « google places » en Asp.Net MVC (Razor)

google_map

Pour un projet Asp. Net MVC,nous devions afficher une carte centrée sur un point précis sur laquelle se trouvait un marker d'un lieu et sur laquelle l'utilisateur pouvait afficher des markers "google places" autour de ce lieu et suivant leur type.

Tout d'abord, nous avons ajouter à notre css le style de notre map :

#map-canvas{
    width: 630px;
    height: 250px;
    max-width: none;
    margin-bottom: 10px;
    border: 1px solid #BDC1C4;
}

Puis dans la page cshtml, nous avons ajouter

@using MonProjet.ViewModel.Models.Map.MapVm

<div id="map-canvas"></div>

Dans le MapVM, il y aura

namespace MonProjet.ViewModel.Models.Map
{

    public class MapVm
    {
        public string MarkerTitre { get; set; }

        public string CentreMapLatitude { get; set; }

        public string CentreMapLongitude { get; set; }

        public string MarkerLatitude { get; set; }

        public string MarkerLongitude { get; set; }
    }

}

On prendra soin de bien formater les latitudes et longitudes où lieuLocation est un System.Data.Entity.Spatial.DbGeography

model.MarkerLatitude  = lieuLocation.Latitude.Value.ToString(CultureInfo.CreateSpecificCulture("en-US"));
model.MarkerLongitude  = lieuLocation.Value.ToString(CultureInfo.CreateSpecificCulture("en-US"));

Puis nous initialiserons notre map au chargement de la page en javascript :

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

<script>

    var map;
    var infoWindowMyMarker = new google.maps.InfoWindow();
    var marker;
    var service;

    function loadMap() {
        var mapOptions = {
            zoom: 16,
            center: new google.maps.LatLng("@Model.CentreMapLatitude", "@Model.CentreMapLongitude"),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        createMarker(map);
    }

    function createMarker(m) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng("@Model.MarkerLatitude", "@Model.MarkerLongitude"),
            map: m,
            title: '@Model.MarkerTitre',
            // option pour pouvoir déplacer le marker
            draggable: true, 
            // option pour afficher le marker de son choix, si rien non renseigné ce sera le marker de google
            icon: "@Url.Content("~/Content/Images/marker.png")"  
        });
    }

    var mapModule = function() {

        return {
            onLoad: function() {
                loadMap();
            }
        };
    }();

    $(function () {
        modalModule.onLoad();
    });

</script>

Et voici les fonctions pour afficher les markers "google places" où la variable type sera le type de place que nous voulons afficher parmi bakery, museum, parking, school et bien d'autre et la variable radius (un int) qui sera le rayon de recherche autour de notre lieu

<script>
    function placeTypes(type,radius) {

        var request = {
            location: new google.maps.LatLng("@Model.MarkerLatitude", "@Model.MarkerLongitude"),
            radius: <code>radius

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.