Last Updated: February 25, 2016
·
1.365K
· alan_van_buuren

Maps with Google Maps & MVC

Para realizar un mapeo de datos en tu Web usando Google Maps, podrías hacer lo siguiente:

1) Invocar la API de Google Maps

<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&amp;language=es'></script> 

2) Declarar el DIV donde pintarás el mapa

<div id='_Estacionamientos_' />

3) Invocar el Método que se realizará la ejecución y pintado de datos

$('.Estado').click(function () {
     var Id = $(this).attr('id');

     $.ajax({
     url: '@Url.Action("GeneraMapa", "ControlerDeMapas"',
     data: { IdEstado: Id },
     type: "post",
     cache: false,
     success: function (retorno) {


     var markers = new Array();

     $.each(retorno.DireccionesRelacionadasConLaSede, function (index, itm) {
                var _markers = [itm.Regreso3, itm.Regreso1, itm.Regreso2, itm.Regreso4];
                markers.push(_markers);
     });

     var myOptions = {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
     };


     var map = new google.maps.Map(document.getElementById("_Estacionamientos_"), myOptions);
     var infowindow = new google.maps.InfoWindow();
     var marker, i;
     var bounds = new google.maps.LatLngBounds();

     for (i = 0; i < markers.length; i++) {
          var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
          var Comentario = markers[i][0];
          bounds.extend(pos);
          marker = new google.maps.Marker({
          position: pos,
          map: map,
          icon: markers[i][3]
      });

     map.fitBounds(bounds);
               }
          }
     },
     error: function () {

     }
});

Y pues bueno... obtendrías un mapa con diferentes marcadores, en tu controller podrías declarar que tipo de icono quieres mostrar.

Así qué: ¡Listo!