como incluir el mapa de google en mi web

davidber · September 2, 2013

Hola a todos,

quiero introducir el mapa de google en la sección de contacto ubicando mi tienda fisica,

alquien puede ayudarme?

Gracias,

un saludo.

Edited September 7, 2013 by davidber (see edit history)

nadie · September 2, 2013

Hola a todos,

quiero introducir el mapa de google en la sección de contacto ubicando mi tienda fisica,

alquien puede ayudarme?

Gracias,

un saludo.

Supongo que te refieres a añadirlo dentro del formulario de contacto, si es así, edita el fichero:

/themes/tu-plantilla/contact-form.tpl

nadie · September 2, 2013

Por cierto, sabias que tienes otra sección en la web, donde tambien se ve el mapa, si accedes a:

tuweb.com/stores.php

Donde en esa parte, puedes configurar las coordenadas del mapa, en la pestaña Preferencias -> Contactos de la tienda.

davidber · September 5, 2013

prueba

cuando dices editar este fichero:

/themes/tu-plantilla/contact-form.tpl

sirve con introducir el codigo que me aparece en enlazar en el mapa google, es este:

https://maps.google.es/maps/empw?url=https:%2F%2Fmaps.google.es%2Fmaps%3Ff%3Dq%26source%3Ds_q%26hl%3Des%26geocode%3D%26q%3Dsevilla%26aq%3D%26sll%3D37.286243,-5.923498%26sspn%3D0.009373,0.01929%26vpsrc%3D6%26ie%3DUTF8%26hq%3D%26hnear%3DSevilla,%2BAndaluc%25C3%25ADa%26ll%3D37.388096,-5.98233%26spn%3D0.074885,0.154324%26t%3Dm%26z%3D13%26output%3Dembed&hl=es&gl=es

Gracias,

nadie · September 5, 2013

Cuando digo editar fichero:

/themes/tu-plantilla/contact-form.tpl

Es

Adjunto Imagen

El codigo del iframe. (El enlace que tu me has pasado, te genera segun las dimensiones que eligas el codigo del iframe, pues el codigo del iframe es lo que tienes que pegar)

Es mas si pulsas en "personalizar y obtener vista previa..." iras a la paginas que me has pasado donde puedes cambiar las dimensiones y te pasa el nuevo codigo del iframe a pegar.

Adjunto Imagen

nadie · September 5, 2013

(He actualizado mi ultimo mensaje)

nadie · September 5, 2013

Estimado davidber,

Estoy muy preocupado por usted.

¿Sigue usted ahí?

davidber · September 7, 2013

Hola, digame por favor,

Edited September 7, 2013 by davidber (see edit history)

nadie · September 7, 2013

Hola, digame por favor,

Coméntame que dudas tienes, o si lo has conseguido añadir en el formulario de contacto.

Saludos,

davidber · September 7, 2013

la primera duda es con que programa editar el archivo contact-form.tpl, lo he abierto con dreamweaver y notepad y me aparecen de diferente manera.

la segunda es a que altura del codigo colocarle el de google, por que no veo ningun punto de refencia.

PD: a que se refiere con que esta preocupado?

Muchas Gracias,

Edited September 7, 2013 by davidber (see edit history)

nadie · September 7, 2013

la primera duda es con que programa editar el archivo contact-form.tpl, lo he abierto con dreamweaver y notepad y me aparecen de diferente manera.

la segunda es a que altura del codigo colocarle el de google, por que no veo ningun punto de refencia.

PD: a que se refiere con que esta preocupado?

Muchas Gracias,

Adjuntame una imagen o captura de como lo quieres dejar y te digo como dejarlo de forma exacta.

Yo uso notepad++ http://notepad-plus-plus.org/ para pequeñas modificaciones de este tipo, pero sino estas acostumbrado a visualizar codigo, es normal que te cueste un poco de trabajo al principio, pero vamos adjuntame una captura de como lo quieres dejar y estaré encantado de ayudarte.

PD: Lo de estoy preocupado por usted, lo comente por si tenias dificultades al poner el código o todavía no lo había puesto, fue simplemente un síntoma de preocupación, por si estaba teniendo dificultades para colocar el mapa de google, en la parte que usted requiere.

davidber · September 7, 2013

Ok, entiendo

davidber · September 7, 2013

pero no puedo añadir la captura que le he preparado,

una vez añadida, pulso post, y no lo sube

que puedo hacer

Edited September 7, 2013 by davidber (see edit history)

nadie · September 7, 2013

pero no puedo añadir la captura que le he preparado,

una vez añadida, pulso post, y no lo sube

Pulsa en "Usar editor completo" para subir una imagen desde tu equipo o sube la imagen aquí: http://imageshack.us/ y me pasas el enlace de la imagen.

Saludos,

davidber · September 7, 2013

ya he subido la captura, aunque en el comentario anterior.

Edited September 7, 2013 by davidber (see edit history)

nadie · September 7, 2013

Ok.

Editar fichero:

/themes/tu-plantilla/contact-form.tpl

Tendras por ejemplo este codigo:

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{capture name=path}{l s='Contact'}{/capture}
{include file="$tpl_dir./breadcrumb.tpl"}

<h1>{l s='Customer service'} - {if isset($customerThread) && $customerThread}{l s='Your reply'}{else}{l s='Contact us'}{/if}</h1>

{if isset($confirmation)}
	<p>{l s='Your message has been successfully sent to our team.'}</p>
	<ul class="footer_links">
		<li><a href="{$base_dir}"><img class="icon" alt="" src="{$img_dir}icon/home.gif"/></a><a href="{$base_dir}">{l s='Home'}</a></li>
	</ul>
{elseif isset($alreadySent)}
	<p>{l s='Your message has already been sent.'}</p>
	<ul class="footer_links">
		<li><a href="{$base_dir}"><img class="icon" alt="" src="{$img_dir}icon/home.gif"/></a><a href="{$base_dir}">{l s='Home'}</a></li>
	</ul>
{else}
	<p class="bold">{l s='For questions about an order or for more information about our products'}.</p>
	{include file="$tpl_dir./errors.tpl"}
	<form action="{$request_uri|escape:'htmlall':'UTF-8'}" method="post" class="std" enctype="multipart/form-data">
		<fieldset>
			<h3>{l s='send a message'}</h3>
			<p class="select">
				<label for="id_contact">{l s='Subject Heading'}</label>
			{if isset($customerThread.id_contact)}
				{foreach from=$contacts item=contact}
					{if $contact.id_contact == $customerThread.id_contact}
						<input type="text" id="contact_name" name="contact_name" value="{$contact.name|escape:'htmlall':'UTF-8'}" readonly="readonly" />
						<input type="hidden" name="id_contact" value="{$contact.id_contact}" />
					{/if}
				{/foreach}
			</p>
			{else}
				<select id="id_contact" name="id_contact" onchange="showElemFromSelect('id_contact', 'desc_contact')">
					<option value="0">{l s='-- Choose --'}</option>
				{foreach from=$contacts item=contact}
					<option value="{$contact.id_contact|intval}" {if isset($smarty.post.id_contact) && $smarty.post.id_contact == $contact.id_contact}selected="selected"{/if}>{$contact.name|escape:'htmlall':'UTF-8'}</option>
				{/foreach}
				</select>
			</p>
			<p id="desc_contact0" class="desc_contact"> </p>
				{foreach from=$contacts item=contact}
					<p id="desc_contact{$contact.id_contact|intval}" class="desc_contact" style="display:none;">
						{$contact.description|escape:'htmlall':'UTF-8'}
					</p>
				{/foreach}
			{/if}
			<p class="text">
				<label for="email">{l s='Email address'}</label>
				{if isset($customerThread.email)}
					<input type="text" id="email" name="from" value="{$customerThread.email|escape:'htmlall':'UTF-8'}" readonly="readonly" />
				{else}
					<input type="text" id="email" name="from" value="{$email|escape:'htmlall':'UTF-8'}" />
				{/if}
			</p>
		{if !$PS_CATALOG_MODE}
			{if (!isset($customerThread.id_order) || $customerThread.id_order > 0)}
			<p class="text select">
				<label for="id_order">{l s='Order reference'}</label>
				{if !isset($customerThread.id_order) && isset($isLogged) && $isLogged == 1}
					<select name="id_order" >
						<option value="0">{l s='-- Choose --'}</option>
						{foreach from=$orderList item=order}
							<option value="{$order.value|intval}" {if $order.selected|intval}selected="selected"{/if}>{$order.label|escape:'htmlall':'UTF-8'}</option>
						{/foreach}
					</select>
				{elseif !isset($customerThread.id_order) && !isset($isLogged)}
					<input type="text" name="id_order" id="id_order" value="{if isset($customerThread.id_order) && $customerThread.id_order|intval > 0}{$customerThread.id_order|intval}{else}{if isset($smarty.post.id_order) && !empty($smarty.post.id_order)}{$smarty.post.id_order|intval}{/if}{/if}" />
				{elseif $customerThread.id_order|intval > 0}
					<input type="text" name="id_order" id="id_order" value="{$customerThread.id_order|intval}" readonly="readonly" />
				{/if}
			</p>
			{/if}
			{if isset($isLogged) && $isLogged}
			<p class="text select">
			<label for="id_product">{l s='Product'}</label>
				{if !isset($customerThread.id_product)}
				{foreach from=$orderedProductList key=id_order item=products name=products}
					<select name="id_product" id="{$id_order}_order_products" class="product_select" style="width:300px;{if !$smarty.foreach.products.first} display:none; {/if}" {if !$smarty.foreach.products.first}disabled="disabled" {/if}>
						<option value="0">{l s='-- Choose --'}</option>
						{foreach from=$products item=product}
							<option value="{$product.value|intval}">{$product.label|escape:'htmlall':'UTF-8'}</option>
						{/foreach}
					</select>
				{/foreach}
				{elseif $customerThread.id_product > 0}
					<input type="text" name="id_product" id="id_product" value="{$customerThread.id_product|intval}" readonly="readonly" />
				{/if}
			</p>
			{/if}
		{/if}
		{if $fileupload == 1}
			<p class="text">
			<label for="fileUpload">{l s='Attach File'}</label>
				<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
				<input type="file" name="fileUpload" id="fileUpload" />
			</p>
		{/if}
		<p class="textarea">
			<label for="message">{l s='Message'}</label>
			 <textarea id="message" name="message" rows="15" cols="10">{if isset($message)}{$message|escape:'htmlall':'UTF-8'|stripslashes}{/if}</textarea>
		</p>
		<p class="submit">
			<input type="submit" name="submitMessage" id="submitMessage" value="{l s='Send'}" class="button_large" />
		</p>
	</fieldset>
</form>
{/if}

(Al menos ese es el que tengo yo en la plantilla por defecto en Prestashop 1.5)

Ejemplo rápido:

Justo debajo de:

{include file="$tpl_dir./breadcrumb.tpl"}

añadimos por ejemplo esto:

<div id="datosinfo">
<p class="infomil"> <strong> {l s='Telefono: '} </strong> {l s='666 666 666'} </p>
<p class="infomil"> <strong> {l s='Direccion: '} </strong> {l s='calle prueba'} </p>
<p class="infomil"> <strong> {l s='Email: '} </strong> {l s='[email protected]'} </p>
<div id="mapaGoogle">

AQUÍ PEGAS EL CODIGO DEL IFRAME DE GOOGLE MAPS

</div>
</div>

Y luego en el fichero:

/themes/tu-plantilla/css/contact-form.css

añadimos:

#datosinfo {
margin-top: 26px;
}

.infomil {
padding-bottom:10px;
font-size: 13px;
}

#mapaGoogle {
text-align: center;
margin-top: 10px;
margin-bottom: 17px;
}

nadie · September 7, 2013

De esa manera se quedara como parecido a la siguiente imagen que te muestro:

Si quieres que por otro lado quede así:

Pues este codigo:

<div id="datosinfo">
<p class="infomil"> <strong> {l s='Telefono: '} </strong> {l s='666 666 666'} </p>
<p class="infomil"> <strong> {l s='Direccion: '} </strong> {l s='calle prueba'} </p>
<p class="infomil"> <strong> {l s='Email: '} </strong> {l s='[email protected]'} </p>
<div id="mapaGoogle">

AQUÍ PEGAS EL CODIGO DEL IFRAME DE GOOGLE MAPS
</div>
</div>

Se añadira justo antes de esta linea:

{include file="$tpl_dir./errors.tpl"}

(Recordamos fichero "contact-form.tpl" de tu plantilla (esto te lo digo basado en la plantilla por defecto en Prestashop 1.5.5.0, supongo que tambien valdra para tu caso)

Despues en el fichero:

/themes/tu-plantilla/css/contact-form.css

añadimos esto:

#datosinfo {
margin-top: 8px;
}

.infomil {
padding-bottom:10px;
font-size: 13px;
}

#mapaGoogle {
text-align: center;
margin-top: 10px;
margin-bottom: 17px;
}

nadie · September 7, 2013

(He actualizado mi mensaje, revisalo ahora)

Saludos,

davidber · September 7, 2013

Ya lo he conseguido poner, tu codigo estaba perfecto,

pero me he equivocado, mi intención era ponerlo en el contacto que yo he colocado en la barra de incio y que creé en información (debajo de categorias)

(lo siento, no me di cuenta de que no era ese)

si puedes decirme que archivo es el que tendria que editar para el otro contacto te lo agradeceria,

Muchas Gracias por ayuda.

Edited September 7, 2013 by davidber (see edit history)

davidber · September 9, 2013

He estado mirando pero no encuentro que fichero es el que tengo que modificar,

supongo que sera el mismo que para las otras categorias de información, como aviso legal, entrega, condiciones de uso...

ayuda por favor,

Edited September 9, 2013 by davidber (see edit history)

como incluir el mapa de google en mi web

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites