pagina web

<html>
  <head>
    <title>Maps Testing</title>
  </head>
  <body>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
    <div id="mapid" style="height: 100%"></div>

    <script type="text/javascript">
      //Constantes de oblacion
        var latOblacion = 110540;
        var longOblacion = 111320;

        //Arreglo que contiene los puntos de la frontera
        var frontier = [];

        //Arreglo que contiene los ítems disponibles
        var items = [];

        //Arreglo con las distancias entre los ítems y el usuario objetivo
        var itemsDistance = [];

        //Arreglo que contiene los usuarios disponibles
        var users = [];

        //Arreglo con las distancias entre los usuarios disponibles y el usuario objetivo
        var usersDistance = [];

        //Arreglo con la ruta de recomendación
        var route = [];

      //Imágenes de los íconos
        var itemIcon = L.icon({
            iconUrl: 'item_marker.png',

            iconSize: [52, 84],
            iconAnchor: [26, 82]
        });

        var userIcon = L.icon({
            iconUrl: 'user_marker.png',

            iconSize: [52, 84],
            iconAnchor: [26, 82]
        });

        function init(latitude, longitude){
            //Máximo zoom es 18
            mymap = L.map('mapid').setView([latitude, longitude], 17);

            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                    maxZoom: 18,
                    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
                    id: 'mapbox.streets'
                }).addTo(mymap);

            return mymap;
        }

      function showMap(mymap, latitude, longitude, type){
        var polygon = L.polygon(frontier, {color: 'blue'}).addTo(mymap);
        var recommendationRoute = L.polyline(route, {color: 'yellow'}).addTo(mymap);
        addUsersAndItemsToMap(mymap);
        L.marker([latitude, longitude]).addTo(mymap);
        if(type == 0){
          mymap.fitBounds(polygon.getBounds());
        }
        else{
          mymap.setView([latitude, longitude], 15);
        }
      }

     </script>
  </body>
</html>