GIS data in a map server / Colocando datos en un servidor de mapas

Ahora vamos a situar la información situándola en un servidor de mapas. La primera idea fue utilizar OpenStrettMap pero finalmente la decisión fue tomada hacia GoogleMaps ya que hay que reconocer la magnífica framework https://developers.google.com/maps/documentation/javascript/ y/o https://developers.google.com/maps/. Con poca base javascript añadir objetos y eventos en objetos tipo mapa es sencillo. Además en Internet hay multitud de ejemplos con los que se puede hacer casi cualquier interactuación con estos mapas.

Lo primero es colocar el objeto "Mapa"


Now let's place the information by placing it in a map server. The first idea was to use OpenStrettMap. Settled on GoogleMaps. The framework is superb. (https://developers.google.com/maps/documentation/javascript/ and / or https://developers.google.com/maps/). With some added javascript objects and events in simple maps. Also, on the Internet, there are many examples of how to interact.

The first is to place the object "Map"



1º Se coloca al principio del HTML lo siguiente:
1 In the beginning of the HTML write this:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

2º Se crea una función iniciadora
2 Inicialize function

<script>
...
var mapa;
...
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = {
zoom: 19,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
}
};
mapa = new google.maps.Map(document.getElementById("mapa"),myOptions); }
</script>

3º Se añade con un div donde estará nuestro mapa
3 Adding tag <div>

<div id="mapa" style="width:800px; height:300px;"></div>

4º A partir de ahí se continúa con nuestra imaginación, adición de marcas, gráficos, líneas, polígonos, etc. Con un poco de paciencia y una ayudita de google el límite es el que queramos imaginarnos.
4 From there we continue with our imagination, adding marks, graphics, lines, polygons, etc.. With a little patience and a little help from google is the limit we want to imagine.

Ejemplo en /Example in Bounded-Roads

Si además se añade un poco de AJAX para poder hacer llamadas al servidor e intercambiar información  la interoperatividad con los mapas de Google será completa.

With AJAX calls to the server will be able to exchange information with maps.