Archivo de la categoría: Google

Anuncio AdSense responsivo. Cambiar posición a horizontal, vertical o rectangular.

Para poder hacer que los anuncios integrados con Google AdSense de nuestro sitio sean responsivos (adaptables a dispositivos móviles) debemos regenerar el código del bloque de anuncio desde Google AdSense indicando Bloque de anuncio adaptable en el desplegable Tamaño de anuncio. De igual manera seleccionaremos Tamaño óptimo en el desplegable Modo.

Esto hará que el anuncio se adapte automáticamente a su contenedor independientemente del dispositivo que se utilice para navegar por nuestra página web.

Pero hay un pequeño problema: el anuncio puede tomar forma horizontal, vertical o rectangular de forma automática y puede ocurrir que aunque tengamos un anuncio responsivo, éste nos descuadre nuestra maquetación web. Para evitar este problema podemos forzar la forma de nuestro anuncio editando el código que nos genera Google AdSense:



<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="auto"></ins>

El valor auto del atributo personalizado data-ad-format es el que indica a Google que puede usar cualquier forma de anuncio (vertical, horizontal o rectangular). Por tanto, cambiando el valor de este atributo forzaremos a que siempre se utilice la misma forma de anuncio, dependiendo del formato que queramos cambiaremos su valor a:



data-ad-format="horizontal"

data-ad-format="vertical"

data-ad-format="rectangle"

Geocodificación Inversa en Google Maps (Reverse Geocoding)

Antes de nada y de manera simple… ¿qué es la geocodificación? Entendemos por geocodificar una dirección dada, por obtener sus coordenadas de latitud y longitud, cosa que Google Maps nos permite desde tiempos inmemoriables :). Ahora Google Maps nos da la posibilidad de poder realizar reverse geocoding, o lo que es lo mismo, saber una dirección a partir de una latitud y longitud, una gozada vaya. La lástima es que permite 15.000 peticiones al día por IP, lo cual no te va a permitir cachear resultados (hacer un cron que te permita calcular esas direcciones con una tabla de posiciones que tengas y guardarlas, de esa manera no tendrías que llamar siempre a Google Maps cada vez que quieras geocodificar), a no ser que obtengas una licencia empresarial.

Aquí puedes ver un ejemplo de funcionamiento de geocodificación inversa.

Veamos la programación de la función lanzada en el “click”:

function clicked(overlay, latlng) {
  if (latlng) {
    geocoder.getLocations(latlng, function(addresses) {
      if(addresses.Status.code != 200) {
        alert("reverse geocoder failed to find
                an address for " + latlng.toUrlValue());
      }
      else {
        address = addresses.Placemark[0];
        var myHtml = address.address;
        map.openInfoWindow(latlng, myHtml);
      }
    });
  }
}

Vemos que la llamada la hace mediante el método getLocations del objeto GClientGeocoder (geocoder), exactamente el mismo método que usabamos para la geocodificación normal. Si todo va bien, la respuesta de google es un objeto que contendrá nuestro Placemark de datos y podremos escoger el formato de respuesta (JSON, XML, KML):

<kml>
  <Response>
    <name>36.712074,-4.440990</name>
    <Status>
      <code>200</code>
      <request>geocode</request>
    </Status>
    <Placemark>
      <address>
        Plaza de la Cruz del Humilladero,
        6, 29006, Málaga, España
      </address>
      <AddressDetails>
        <Country>
          <CountryNameCode>ES</CountryNameCode>
          <CountryName>España</CountryName>
          <AdministrativeArea>
            <AdministrativeAreaName>
              AL
            </AdministrativeAreaName>
            <SubAdministrativeArea>
              <SubAdministrativeAreaName>
                Málaga
              </SubAdministrativeAreaName>
              <Locality>
                <LocalityName>Málaga</LocalityName>
                <Thoroughfare>
                  <ThoroughfareName>
                    6 Plaza de la Cruz del Humilladero
                  </ThoroughfareName>
                </Thoroughfare>
                <PostalCode>
                  <PostalCodeNumber>29006</PostalCodeNumber>
                </PostalCode>
              </Locality>
            </SubAdministrativeArea>
          </AdministrativeArea>
        </Country>
      </AddressDetails>
      <Point>
        <coordinates>-4.4412090,36.7120501,0</coordinates>
      </Point>
    </Placemark>
  </Response>
</kml>

Y eso es todo, una nueva funcionalidad y bastante útil para aquellos que trabajen o estén aprendiendo a integrar Google Maps en sus aplicaciones.

jmaps – jQuery Google Maps Plugin

Google nos anuncia un nuevo plugin para jQuery llamado jmaps. Este plugin nos facilita la gestión de mapas Google en nuestras páginas. Con jmaps podemos realizar operaciones como:

  • Usar geocodificación de Google Maps (normal e inversa).
  • Realizar búsquedas de direcciones.
  • Añadir puntos.
  • Añadir polígonos
  • Obtener información del mapa como tamaño, centro…

Sirva como ejemplo la creación de un mapa y su centrado en un punto:

jQuery('#map1').jmap('init', {
    'mapType':'hybrid',
    'mapCenter':[37.4419, -122.1419]
});

Documentación jmaps