Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- fetch('https://www.datos.gov.co/resource/g373-n3yy.json')
- <html>
- <head>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.full.min.js"></script>
- <script src="xlsx-model.js"></script>
- <script src="script.js"></script>
- </head>
- <body ng-app="xlsxApp" ng-controller="xlsxCtrl" onload = "loadMap()">
- <div class="container">
- <h2>Seleccionar archivo Excel:</h2>
- <input type="file" class="form-control" xlsx-model="excel" multiple>
- <pre ng-show="excel" id="datos">{{excel | json}}</pre>
- </div>
- <div id = "map" style = "width:640px; height:480px;"></div>
- <script>
- const getLocations = () => {
- fetch('https://www.datos.gov.co/resource/g373-n3yy.json')
- .then(response => response.json())
- .then(locations => {
- let locationsInfo = []
- locations.forEach(location => {
- let locationData = {
- position:
- {lat:location.punto.coordinates[1],lng:location.punto.coordinates[0]},
- name:location.nombre_sede
- }
- locationsInfo.push(locationData)
- })
- if(navigator.geolocation){
- navigator.geolocation.getCurrentPosition((data)=>{
- let currentPosition = {
- lat: data.coords.latitude,
- lng: data.coords.longitude
- }
- dibujarMapa(currentPosition, locationsInfo)
- })
- }
- })
- }
- const dibujarMapa = (obj, locationsInfo) => {
- let map = new google.maps.Map(document.getElementById('map'),{
- zoom: 4,
- center: obj
- })
- let marker = new google.maps.Marker({
- position: obj,
- title: 'Tu ubicacion'
- })
- marker.setMap(map)
- let markers = locationsInfo.map(place => {
- return new google.maps.Marker({
- position: place.position,
- map: map,
- title: place.name
- })
- })
- }
- window.addEventListener('load',getLocations)
- </script>
- <script async defer
- src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvbD8IJCFFc_yUPDT2IxyhPyqQQqEg1fc&callback=initMap">
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment