Skocz do zawartości
sower

[TUTORIAL] GOOGLE MAPS NA STRONIE KONTAKTU

Rekomendowane odpowiedzi

Na prośbę kilku użytkowników tego forum napiszę jak dodać mapę google maps na stronie kontakt w prestashop (contact-form)

 

tak jak jest tutaj

 

http://sklep.qqkids.pl/contact-form.php

 

TO zmieniamy:

 

1. W pierwszej kolejności należy wygenerować API key google maps - to zrobimy tu: http://code.google.com/apis/maps/signup.html

 

jeżeli mamy już API key to:

 

2. Modyfikujemy plik contact-form.tpl z templetki, która jest używana w sklepie ;)

 

3.Kod jaki należy wstawić za linią

{l s='Contact us'}

- w miejsce "TWOJ API KEY" wstawiamy key, który wcześniej wygenerowaliśmy

- należy także zmienić opis, który będzie wyświetlany w chmurce na mapce

Następnie musimy wejść na stronę http://www.gorissen.info/Pierre/maps/go ... cation.php i wskazać dokładną lokalizację adresu naszego sklepu - najlepiej przełączyć się na widok "SATELITA" odnajdujemy adres naszego sklepu i na budynku klikamy - kliknięcie powoduje wstawienie markera a w okienkach po prawej pojawią się koordynaty naszego adresu Lat: i Long:

Kopiujemy te wartości i wstawiamy do n/w kodu

 

przykładowe koordynaty dla adresu Gdańsk, ul. Matejki 6

 

map.setCenter(new GLatLng(54.375369,18.610775),16);

var point = new GLatLng(54.375369,18.610775);

 

 

<!-- Google Maps code start -->{literal}<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=TWOJ API KEY" type="text/javascript"></script><div id="map" style="width: 100%; height: 300px"><div style="margin-top: -10px;"><a target="_blank" href="http://sklep.qqkids.pl">[img=http://img809.imageshack.us/img809/7482/butonqq.png]</a></div></div><noscript>[b]JavaScript must be enabled in order for you to use Google Maps.[/b]       However, it seems JavaScript is either disabled or not supported by your browser.       To view Google Maps, enable JavaScript by changing your browser options, and then       try again.    </noscript>     <script type="text/javascript">    //<![CDATA[function display_map(){    if (GBrowserIsCompatible()) {       // A function to create the marker and set up the event window      // Dont try to unroll this function. It has to be here for the function closure      // Each instance of the function preserves the contends of a different instance      // of the "marker" and "html" variables which will be needed later when the event triggers.                html ="<div style=\"width:250px; text-align: left;\">NAZWA TWOJE FIRMYADRES ULICAADRES KOD POCZTOWY I MIASTOTELEFON<\/div>";            function createMarker(point,html) {        var marker = new GMarker(point);        GEvent.addListener(marker, "click", function() {          marker.openInfoWindowHtml(html);        });        return marker;      }      // Display the map, with some controls and set the initial location       var map = new GMap2(document.getElementById("map"));      map.addControl(new GSmallMapControl());      map.addControl(new GMapTypeControl());      map.setCenter(new GLatLng(54.375369,18.610775),16);          // Set up the marker and info          var point = new GLatLng(54.375369,18.610775);      var marker = createMarker(point, html)      map.addOverlay(marker);      marker.openInfoWindowHtml(html);    }        // display a warning if the browser was not compatible    else {      alert("Sorry, the Google Maps API is not compatible with this browser");    }    // This Javascript is based on code provided by the    // Community Church Javascript Team    // http://www.bisphamchurch.org.uk/       // http://econym.org.uk/gmap/    //]]>}</script>{/literal}{literal}<script type="text/javascript">window.onload= function(){  display_map();};window.onunload= function(){  GUnload();};</script> {/literal}<!-- Google Maps code end -->
Mam nadzieję, że zrozumiale to opisałem ;) - oczywiście będę wdzięczny jeżeli ktoś skorzysta z mojej porady za nie usuwanie linku zwrotnego do mojego sklepu internetowego ;) - linku i tak nie widać bo zasłania go mapa ;)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

zdecydowanie dobry tutorial :)ale podniosę trochę poziom i zapytam jak to umieścić na stronie generowanej w CMS?

Generalnie tak samo ;) - tworzysz tekst w edytorze a potem w html-u osadzasz kod

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Generalnie tak samo ;) - tworzysz tekst w edytorze a potem w html-u osadzasz kod

Generalnie własnie nie tak samo, bo jeśli tylko osadzisz kod html w edytorze, to nic nie wyświetla.i mam zamiar się dziś dowiedzieć dlaczego tak sie dzieje..

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Przed wejściem w edycje cms wyłącz JS w przeglądarce wtedy nie ma edytora który usuwa znaczniki. Zapisz i włącz na nowo JS.

Dokładnie ;)Myślałem, iz pisząc "html-u osadzasz kod" jest to oczywiste ;)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

w moim przypadku i tak musiałem zastosować inne rozwiązanie. Potrzebowałem umieścić kilka lokalizacji sklepów na jednej mapie :)

;) - swoją drogą no skryptu z tego wątku wystarczy dodać kilka linijek kodu (dla każdej lokalizacji) i możesz na mapce umieścić dowolną ilość punktów na gm.Dla jakiegoś sklepu komputerowego robiłem na tym skrypcie mapkę z ich punktami odbioru w 32 lokacjach w Polsce i bezproblemowo dało się to wszystko upchnąc ;)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Witam, próbowałem osadzić kod na stronie CMS według waszych instrukcji ale coś jest nie tak,

 

Wchodzę do edytora, na wyłączonej obsłudze JS wklejam kod, wprowadzając wcześniej mój API Key, adres strony, ustawiam odpowiednią lokalizację i po kliknięciu zapisz i przejściu na stronę widzę jedynie ikonkę mojego sklepu z tej części

 

<div style="margin-top: -10px;"><a target="_blank" href="http://sklep.qqkids.pl">[img=http://img809.imageshack.us/img809/7482/butonqq.png]</a></div>

oraz {literal} a mapki nie ma, możecie mi powiedzieć gdzie tkwi szkopuł ?? :)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się

Komentowanie zawartości tej strony możliwe jest po zalogowaniu



Zaloguj się



  • Przeglądający

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

  • Aktywni użytkownicy

    Nikt jeszcze nie otrzymał reputacji w tym tygodniu.

  • Statystyki forum

    • Tematów
      7 778
    • Postów
      37 069
×