Forum für CMS/made simple

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:

 Hier klicken, um den Code zum Kopieren zu markieren

[...]

{* 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

Andynium

Moderator

Ort: Dohna / SN / Deutschland

Registriert: 13. September 2010

Beiträge: 7.017

Webseite

Re: Dynamisch & einfach | Google-Maps mit Marker

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

Ist "dynamisch und einfach" jetzt deine Marke ?

---

1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms