Insertar un mapa de Google Maps como imagen

En el siguiente ejemplo crearemos una función que nos ayudará a crear un “shortcode” que utilizaremos para insertar un mapa de Google Maps como imagen en nuestro sitio creado en WordPress

Asegúrate de insertar el código en el archivo functions.php del tema activo en tu sitio web.

function smp_map_it_atts($atts,$content=null)
{  
	$atts = shortcode_atts( array( 'width' => '640', 'height' => '640', 'title' => 'Mi mapa', 'address' => 'Ciudad de México, centro', 'zoom' => '13' ), $atts, 'map-it-atts');
	$base_map_url = 'http://maps.google.com/maps/api/staticmap?sensor=false&size=640x640&format=png&center=';
	return '
	<h2>' . esc_html( $atts['title'] ) . '</h2>
	<div id="map-it-atts" style="width:' . esc_html($atts['width']) . 'px;height:' . esc_html($atts['height']) . 'px;max-width:640px;background:url('. $base_map_url . urlencode($atts['address']) . '&zoom='. urlencode($atts['zoom']) . '&markers=size:mid%7Ccolor:red%7Clabel:%7C' . urlencode($atts['address']) .') no-repeat center center; display:inline-block;" ></div>';
}
add_shortcode('map-it-atts','smp_map_it_atts');
Como se inserta el shortcode:

[map-it-atts width="480" height="320" title="Google Maps" address="Barcelona, España" zoom="16"]

Si deseas más información sobre como desarrollar en

WordPress en español

, visita el Codex oficial de WordPress haciendo clic aquí.

Si necesitas consultoría sobre

WordPress en México

comunícate con nosotros a los siguientes teléfonos: 6598-7155 / 5538-8849 o envíanos un correo electrónico haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css