{"id":375,"date":"2025-04-15T17:16:37","date_gmt":"2025-04-15T23:16:37","guid":{"rendered":"https:\/\/elblogdelgps.com\/ind\/?p=375"},"modified":"2026-03-22T20:33:46","modified_gmt":"2026-03-23T02:33:46","slug":"3-visualizacion-en-mapa-con-leaflet-openlayers-o-google-maps-api","status":"publish","type":"post","link":"https:\/\/elblogdelgps.com\/ind\/2025\/04\/15\/3-visualizacion-en-mapa-con-leaflet-openlayers-o-google-maps-api\/","title":{"rendered":"3.-Visualizaci\u00f3n en mapa con Leaflet, OpenLayers o Google Maps API"},"content":{"rendered":"

Una vez que los datos de geolocalizaci\u00f3n est\u00e1n en tu base de datos, el siguiente paso es representarlos gr\u00e1ficamente<\/strong> en un mapa interactivo. Esto mejora la experiencia del usuario al mostrar rutas, ubicaciones en tiempo real y eventos cr\u00edticos.<\/p>

Herramientas disponibles<\/h3>
Herramienta<\/th>Ventajas principales<\/th>Licencia<\/th><\/tr><\/thead>
Leaflet<\/strong><\/td>Ligero, f\u00e1cil de usar, compatible con OpenStreetMap<\/td>Open Source (MIT)<\/td><\/tr>
OpenLayers<\/strong><\/td>Potente y flexible, soporta m\u00faltiples capas<\/td>Open Source (BSD)<\/td><\/tr>
Google Maps API<\/strong><\/td>Interfaz muy pulida, alta calidad de mapas<\/td>Comercial (requiere API Key)<\/td><\/tr><\/tbody><\/table><\/figure>

Ejemplo: Visualizaci\u00f3n con Leaflet.js<\/h3>
<!DOCTYPE html>
<html>
<head>
  <title>Mapa GPS<\/title>
  <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>
  <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>
<\/head>
<body>
  <div id=\"map\" style=\"height: 500px;\"><\/div>

  <script>
    const map = L.map('map').setView([21.1526, -101.7117], 13); \/\/ Centro inicial

    L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {
      attribution: '\u00a9 OpenStreetMap contributors'
    }).addTo(map);

    \/\/ Punto GPS (latitud, longitud)
    const marcador = L.marker([21.1526, -101.7117]).addTo(map);
    marcador.bindPopup(\"Veh\u00edculo activo<br>Velocidad: 65 km\/h\").openPopup();
  <\/script>
<\/body>
<\/html>
<\/code><\/pre>
Con Google Maps API<\/h3>
<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=TU_API_KEY\"><\/script>
<script>
  function initMap() {
    const ubicacion = { lat: 21.1526, lng: -101.7117 };
    const map = new google.maps.Map(document.getElementById(\"map\"), {
      zoom: 14,
      center: ubicacion,
    });
    const marker = new google.maps.Marker({
      position: ubicacion,
      map: map,
      title: \"Veh\u00edculo en movimiento\",
    });
  }
<\/script>
<body onload=\"initMap()\">
  <div id=\"map\" style=\"height:500px;\"><\/div>
<\/body>
<\/code><\/pre>
Buenas pr\u00e1cticas<\/h3>
  • Actualizar en tiempo real<\/strong> usando WebSocket o peticiones peri\u00f3dicas (AJAX, fetch).<\/li>\n\n
  • Usar \u00edconos personalizados<\/strong> seg\u00fan estado del veh\u00edculo (apagado, en movimiento, alerta).<\/li>\n\n
  • Mostrar informaci\u00f3n contextual<\/strong> en el marcador: velocidad, direcci\u00f3n, hora, eventos.<\/li>\n\n
  • Implementar filtros por unidad, fechas, eventos, zonas<\/strong> para an\u00e1lisis hist\u00f3rico.<\/li><\/ul>","protected":false},"excerpt":{"rendered":"
    Una vez que los datos de geolocalizaci\u00f3n est\u00e1n en tu base de datos, el siguiente paso es representarlos gr\u00e1ficamente en un mapa interactivo. Esto mejora la experiencia del usuario al mostrar rutas, ubicaciones en tiempo real y eventos cr\u00edticos. Herramientas disponibles Herramienta Ventajas principales Licencia Leaflet Ligero, f\u00e1cil de usar, compatible con OpenStreetMap Open Source […]<\/p>\n","protected":false},"author":3,"featured_media":378,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[65],"tags":[68],"class_list":["post-375","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cursos-generales-modulo6","tag-capacitacion"],"_links":{"self":[{"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/posts\/375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/comments?post=375"}],"version-history":[{"count":2,"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/posts\/375\/revisions"}],"predecessor-version":[{"id":423,"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/posts\/375\/revisions\/423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/media\/378"}],"wp:attachment":[{"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/media?parent=375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/categories?post=375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elblogdelgps.com\/ind\/wp-json\/wp\/v2\/tags?post=375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}