Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 26. November 2016 11:53

pWorker
probiert CMS/ms aus
Registriert: 20. Oktober 2016
Beiträge: 78

Dynamisch & einfach | Google-Maps mit Marker

Moin,

ich hab mich lange Zeit mit den verschiedenen Google-Maps Modulen rumgeschlagen ohne effizient zum gewünschten Ergebnis zu kommen, dabei geht das meiner Meinung nach handcoded wesentlich schneller (je nachdem was man erreichen will).

Mein Ziel war es, einen Marker auf die Adresse eines Kunden (FEU-User) auf einer Google-Map zu setzen und diese unter seinem Firmeneintrag anzuzeigen.

Module/ Dinge die dafür relevant sind:

  • CGUserDirectory

  • FEU (Front End Users)

  • GoogleMaps API

optional:

  • CustomGS (macht's noch dynamischer)


Schritt 1: Adressfelder für FEU User (im Backend) hinzufügen.
Strasse und Hausnummer, Postleitzahl, Ort, Land

Schritt 2: CGUserDirectory Detail Template bearbeiten/hinzufügen.

Sample.tpl:

[...]

{* properties *}
  {foreach from=$oneuser.properties item='onepropvalue' key='propname'}
  <div class="row" style="margin: 0.5em;">
    <div style="width: 49%; float: left;">{$properties.$propname.prompt}:</div>
    <div style="width: 49%; float: left;">
    {if $properties.$propname.type == 6}
       {* image *}
       <img src="{$file_location}/{$onepropvalue}" width="100"/>
    {elseif isset($properties.$propname.opts)}
       {* dropdown/multiselect/radiobtns *}
       {$properties.$propname.opts.$onepropvalue}
    {else}
       {$onepropvalue}
    {/if}
    </div>
  </div>
  {/foreach}

{* Hier wird die Google Adresse anhand der Adressfelder gebastelt *}
{capture assign='Adressreplace'}{$oneuser.properties.strasse_und_hausnummer}, {$oneuser.properties.postleitzahl} {$oneuser.properties.ort}, {$oneuser.properties.land}{/capture}


{* Google Ausgabe *}
{* {$Adressreplace|escape:'url'} wandelt die Variable in eine Google genehme Url um *}
{* {$CustomGS.googleKeyStadtplan} entspricht dem Google API Key (hier mit CGUser dynamisch geladen) *}

<h4>Kartenausschnitt:</h4>

<div class="deine-Klasse">
<iframe style="border: 0;" src="https://www.google.com/maps/embed/v1/place?q={$Adressreplace|escape:'url'}&amp;key={$CustomGS.googleKeyStadtplan}" width="635" height="235" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>

Dann noch die Klasse stylen und fertig!

MfG

Offline

#2 04. Dezember 2016 07:16

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Dynamisch & einfach | Google-Maps mit Marker

Danke für's Posten des HowTo's !!

Ist "dynamisch und einfach" jetzt deine Marke big_smile?


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline