var contextmenu = document.createElement("div");
function creaMenuContext() {
// === Creamos el menu contextual con un div ===
      
      contextmenu.id ="menuContextual";
      contextmenu.style.visibility="hidden";
      contextmenu.style.background="#ffffff";
      contextmenu.style.border="1px solid #8888FF";

      contextmenu.innerHTML = '<div class="context" align="center"> <img src="./iconos/separador.png" alt="" /></div>' 
                            + '<div class="context"style="color:#393939">&nbsp;&nbsp;<b>Mapa</b></div>'
                            + '<div class="context" align="center"> <img src="./iconos/separador.png" alt="" /></div>'
                            + '<a href="javascript:inicializaMapa()" style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;Inicializa Mapa&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomInHere()" style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;Zoom +&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomOutHere()"style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;Zoom -&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:centreMapHere()"style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;Centrar Aqui&nbsp;&nbsp;</div></a>'
                            + '<div class="context" align="center"> <img src="./iconos/separador.png" alt="" /></div>';
                            

      map.getContainer().appendChild(contextmenu);

      // === Escuchador para el evento singlerightclick ===
      GEvent.addListener(map,"singlerightclick",function(pixel,tile) {
        // Almacenamos la informacion del pixel pulsado
        // Ajustamos la localización del menu contextual
        // creamos un GControlPosition
        // Aplicamos esto al menu contextual y lo hacemos visible
        clickedPixel = pixel;
        var x=pixel.x;
        var y=pixel.y;
        if (x > map.getSize().width - 120) { x = map.getSize().width - 120 }
        if (y > map.getSize().height - 100) { y = map.getSize().height - 100 }
        var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));  
        pos.apply(contextmenu);
        contextmenu.style.visibility = "visible";
      });
      
       // === If the user clicks on the map, close the context menu ===
      GEvent.addListener(map, "click", function() {
        contextmenu.style.visibility="hidden";
      });
}

      // === Funciones que se ejecutan a partir del menu contextual ===
      
      function zoomInHere() {
       
        var point = map.fromContainerPixelToLatLng(clickedPixel)
        map.zoomIn(point,true);
        
        contextmenu.style.visibility="hidden";
      }      
      function zoomOutHere() {
        
        var point = map.fromContainerPixelToLatLng(clickedPixel)
        map.setCenter(point,map.getZoom()-1); // There is no map.zoomOut() equivalent
        
        contextmenu.style.visibility="hidden";
      }      
      function centreMapHere() {
        
        var point = map.fromContainerPixelToLatLng(clickedPixel)
        map.setCenter(point);
        
        contextmenu.style.visibility="hidden";
      }
      function consulta100m() {
              var dist = document.getElementById("distancia");
              dist.value = "100";
              
              var point = map.fromContainerPixelToLatLng(clickedPixel);              
              compruebaDistancia2(point);
              contextmenu.style.visibility="hidden";
      }
      function consulta200m() {
              var dist = document.getElementById("distancia");
              dist.value = "200";
              
              var point = map.fromContainerPixelToLatLng(clickedPixel);              
              compruebaDistancia2(point);
              contextmenu.style.visibility="hidden";
      }
      function consulta300m() {
              var dist = document.getElementById("distancia");
              dist.value = "300";
              
              var point = map.fromContainerPixelToLatLng(clickedPixel);              
              compruebaDistancia2(point);
              contextmenu.style.visibility="hidden";
      }
      function consulta500m() {
              var dist = document.getElementById("distancia");
              dist.value = "500";
              
              var point = map.fromContainerPixelToLatLng(clickedPixel);              
              compruebaDistancia2(point);
              contextmenu.style.visibility="hidden";
      }
       function consultaMetros(distancia) {
              var dist = document.getElementById("distancia");
              dist.value = distancia;
              
              var point = map.fromContainerPixelToLatLng(clickedPixel);              
              compruebaDistancia2(point);
              contextmenu.style.visibility="hidden";
      }
      
      
      function aniadeOpcionConsulta() {
          contextmenu.innerHTML  = contextmenu.innerHTML + '<div class="context"style="color:#393939">&nbsp;&nbsp;<b>Consultas</b></div>'   
                            + '<div class="context" align="center"> <img src="./iconos/separador.png" alt="" /></div>'
                            + '<a href="javascript:consultaMetros(100)"style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;100 metros&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:consultaMetros(200)"style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;200 metros&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:consultaMetros(300)"style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;300 metros&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:consultaMetros(400)"style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;400 metros&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:consultaMetros(500)"style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;500 metros&nbsp;&nbsp;</div></a>';
      }

      function ocultaOpcionConsulta() {
          contextmenu.innerHTML  = '<div class="context" align="center"> <img src="./iconos/separador.png" alt="" /></div>' 
                            + '<div class="context"style="color:#393939">&nbsp;&nbsp;<b>Mapa</b></div>'
                            + '<div class="context" align="center"> <img src="./iconos/separador.png" alt="" /></div>'
                            + '<a href="javascript:inicializaMapa()" style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;Inicializa Mapa&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomInHere()" style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;Zoom +&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomOutHere()"style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;Zoom -&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:centreMapHere()"style="text-decoration:none;color:#4F4E4E"><div class="context">&nbsp;&nbsp;Centrar Aqui&nbsp;&nbsp;</div></a>'
                            + '<div class="context" align="center"> <img src="./iconos/separador.png" alt="" /></div>';
      }