“Mapear” accesos al servidor III (y fin)

Y solo nos quedaba la web:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
		<meta charset="utf-8">
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-1.10.2.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%23map%20%7B%0A%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20html%2C%20body%20%7B%0A%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20padding%3A%200%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  </head>
  <body>
		
<div id="map"></div>

		
<div id="content"></div>

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%09%09var%20map%3B%0A%09%09%09var%20markers%3D%5B%5D%3B%0A%09%09%09%0A%09%09%09%2F%2F%20Inicializamos%20el%20mapa%20(callback%20desde%20la%20carga%20de%20la%20librer%C3%ADa%20de%20GMaps)%0A%20%20%20%20%20%20function%20initMap()%20%7B%0A%09%09%09%09directionsService%20%3D%20new%20google.maps.DirectionsService%3B%0A%09%09%09%09directionsDisplay%20%3D%20new%20google.maps.DirectionsRenderer%3B%0A%09%09%09%09%0A%20%20%20%20%20%20%20%20map%20%3D%20new%20google.maps.Map(document.getElementById('map')%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20center%3A%20%7Blat%3A%2040%2C%20lng%3A%20-4%7D%2C%0A%20%20%20%20%20%20%20%20%20%20zoom%3A%202%0A%09%09%09%09%7D)%3B%0A%09%09%09%7D%0A%0A%09%09%09%2F%2F%20Esta%20funci%C3%B3n%20crea%20un%20marcador%20y%20lo%20agrega%20al%20mapa.%0A%09%09%09function%20addMarker(lat%2C%20lng%2C%20t%2C%20icon)%20%7B%0A%09%09%09%09var%20myLatlng%20%3D%20new%20google.maps.LatLng(lat%2C%20lng)%3B%0A%09%09%09%09var%20marker%20%3D%20new%20google.maps.Marker(%7B%0A%09%09%09%09%09%09position%3A%20myLatlng%2C%0A%09%09%09%09%09%09title%3At%2C%0A%09%09%09%09%09%09icon%3A%20icon%2C%0A%09%09%09%09%09%09anchor%3A%20new%20google.maps.Point(9%2C%2032)%2C%20%2F%2F%20Hace%20falta%20centrar%20bien%20esta%20chincheta%0A%09%09%09%09%09%09draggable%3A%20false%09%0A%09%09%09%09%7D)%3B%0A%09%09%09%09marker.setMap(map)%3B%0A%09%09%09%09markers.push(marker)%3B%0A%09%09%09%7D%0A%0A%09%09%09var%20socket%3B%0A%09%09%09%2F%2F%20Esperamos%20a%20que%20todo%20cargue.%0A%09%09%09%24(document).ready(function%20()%20%7B%0A%09%09%09%09%2F%2F%20Creamos%20la%20conexi%C3%B3n%20socket.io%20con%20el%20servidor%0A%09%09%09%09socket%20%3D%20io()%3B%0A%09%09%09%09%2F%2F%20Y%20que%20pasa%20cuando%20nos%20llegue%20un%20mensaje.%0A%09%09%09%09socket.on('pos'%2C%20function(obj)%7B%0A%09%09%09%09%09%2F%2F%20Un%20icono%20para%20casos%20que%20no%20deber%C3%ADan%20pasar...%0A%09%09%09%09%09var%20icon%3D'http%3A%2F%2Fmaps.google.com%2Fmapfiles%2Fms%2Ficons%2Fpurple-pushpin.png'%3B%0A%09%09%09%09%09%2F%2F%20Dependiendo%20del%20puerto%20destino%20ponemos%20un%20icono%20u%20otro.%0A%09%09%09%09%09switch%20(parseInt(obj.DPT))%20%7B%0A%09%09%09%09%09%09case%2022%3A%0A%09%09%09%09%09%09%09icon%3D'http%3A%2F%2Fmaps.google.com%2Fmapfiles%2Fms%2Ficons%2Fred-pushpin.png'%3B%0A%09%09%09%09%09%09%09break%3B%0A%09%09%09%09%09%09case%2080%3A%0A%09%09%09%09%09%09%09icon%3D'http%3A%2F%2Fmaps.google.com%2Fmapfiles%2Fms%2Ficons%2Fgrn-pushpin.png'%3B%0A%09%09%09%09%09%09%09break%3B%0A%09%09%09%09%09%09case%2021%3A%0A%09%09%09%09%09%09%09icon%3D'http%3A%2F%2Fmaps.google.com%2Fmapfiles%2Fms%2Ficons%2Fblue-pushpin.png'%3B%0A%09%09%09%09%09%09%09break%3B%0A%09%09%09%09%09%7D%0A%09%09%09%09%09%2F%2F%20Y%20a%C3%B1adimos%20el%20marcador%20al%20mapa%0A%09%09%09%09%09addMarker(obj.lat%2C%20obj.lng%2C%20obj.info%2C%20icon)%3B%0A%09%09%09%09%7D)%3B%0A%09%09%09%7D)%3B%0A%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
        <!-- Cambiadme el AIzaSyAJNaGAoEMYp9k2KOzkmWArlj6Cb439oy por vuestro propio codigo de API GMaps... plissss.... -->
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fkey%3DAIzaSyAJNaGAoEMYp9k2KOzkmWArlj6Cb439oyU%26callback%3DinitMap%22%20async%20defer%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fsocket.io%2Fsocket.io.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />	
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.11.4%2Fjquery-ui.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fcolor%2Fjquery.color-2.1.2.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  </body>
</html>

Primera entrada: https://blog.norsip.com/2017/09/27/mapear-accesos-al-servidor-i/

Segunda parte: https://blog.norsip.com/2017/09/27/mapear-accesos-al-servidor-ii/

Github: https://github.com/luisesn/mapa-conexiones

Deja un comentario