[Cerrado] Mostrar mapa de dirección de entrega  

Hola Julio,

Supongo que loq ue haces referencia es a este plugin:

https://wordpress.org/plugins/map-for-woocommerce/

Sin embargo, ten en cuenta que para poder usar este tipo de mapas necesitas una api de google y ya no ofrecen estas de forma gratuita para maps.

Verifica y nos comentas.

Un saludo 🖐️ 

@argenis Gracias.

Disculpa, pero es para Prestashop. Pensé que estaba en ese Foro.

Hola Julio,

Veo que tienes PrestaShop 1.6, para esta versión no figura esta mejora que indicas, más allá de los módulos que son para mostrar en un mapa tus tiendas:

https://addons.prestashop.com/en/international-localization/18457-store-locator-pickup-with-google-maps.html

De igual forma ten en cuenta que si trabajan con una api de Google sería lo mismo que te indique antes, estas ya no son gratuitas.

Un saludo 🖐️ 

Hola @argenis

No. Es un pequeño mapa que aparece en la zona marc

ada en rojo en la pantalla adjunta.

Muchas gracias.

Hola Julio.

Lo primero que tendrás que hacer es crear una API de Google Maps:

-> https://developers.google.com/maps/documentation/javascript/get-api-key?hl=es-419

• Accede Google Cloud Console.
• Crea un nuevo proyecto o selecciona un proyecto existente.
• Navega a la sección de APIs y Servicios y habilita la API de Google Maps JavaScript.
• Obtén tu Clave API.

Luego tendrás que modificar el archivo view.tpl que se encuentra en administracion -> themes -> default -> template -> controllers -> orders -> helpers -> view " view.tpl "

Pero lo primero es conseguir la key de Google Maps.

Un saludo

Muchas gracias @pepesoler

Ya dispongo de la Api Key.

Me puedes decir qué debo modificar en el fichero view.tpl?  Lo tengo abierto.

Un saludo.

Hola Julio.

Tienes que buscar el siguiente código:

<div class="panel">
<h3>
<i class="icon-truck"></i>
{l s='Shipping address'}
</h3>
<div class="row">
<div class="col-lg-4">
{if $order->id_address_delivery}
{$address_delivery|escape:'html':'UTF-8'}
{/if}
</div>
</div>
</div>

Justo debajo del bloque donde se muestra la dirección de envío, añade un div para el mapa:

<div class="panel">
<h3>
<i class="icon-map-marker"></i>
{l s='Shipping Address Map'}
</h3>
<div id="map" style="width: 100%; height: 400px;"></div>
</div>

Al final del archivo view.tpl, añade el script de Google Maps. Asegúrate de reemplazar YOUR_GOOGLE_MAPS_API_KEY con tu clave API de Google Maps:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY"></script>
<script>
function initMap() {
var address = "{$address_delivery.address1|escape:'html':'UTF-8'}, {$address_delivery.city|escape:'html':'UTF-8'}, {$address_delivery.postcode|escape:'html':'UTF-8'}, {$address_delivery.country|escape:'html':'UTF-8'}";
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: -34.397, lng: 150.644} // Valores iniciales, se actualizarán con la geocodificación
});

geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}

document.addEventListener('DOMContentLoaded', function() {
initMap();
});
</script>

Un Saludo

Muchísimas gracias Pepe.

Ya no te molesto más. Eres un fenómeno.

Un cordial saludo.

Hola Julio,

Gracias a ti, es un placer para nosotros siempre poder ayudarte. 

No dudes en escribirnos si tienes cualquier otra consulta. 

Un Saludo 😊