Google-Maps Karte in Artikeln anzeigen

Fragen zur Implementierung und/oder Anpassung von ConPresso 4 werden in diesem Forum diskutiert.
dD
ConPresso-User
Beiträge: 55
Registriert: 01.01.1970 01:00
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Google-Maps Karte in Artikeln anzeigen

Beitrag von dD »

Hab schon gesucht aber noch nix wirklich passendes gefunden und hoffe ich bin diesmal im richtigen Thema. :wink:
Semf hats ja mal angedacht passt mir aber nicht mit den separaten Fenster.

Ich würde gerne über Conpresso innerhalb von manchen Artikeln eine kleine Map anzeigen bin mir aber nicht im klaren wie ich das in die unterschiedlichen Dateien des CPO4 verpacke. Ich bin ja auch Anfänger und oft ein bisserl doof :oops:

In einer statischen Seite klappt alles prima, habs dann in Cpo eingebaut wo es auch funktioniert hat aber kleine haken.
Genau dabei bräuchte ich mal Hilfe.

Bisher sieht es so aus:
Global Header: hat geschrieben:..
<Head>
....
<script src="http://maps.google.com/maps?file=api&v=2& .... "text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
function load() {
... alles was ich hier an Funktionen reinschreib funzt prima, daher gekürzt ...
//]]>
</script>

</head>

<body onload="load()" onunload="GUnload()">
.... weiter wie immer
Dann im Artikel einfach per HTML eingetippt und die Karte steht auf dem Schirm
im Artikel hat geschrieben:<div id="map" style="width: 250px; height: 200px;"></div>


Blöderweise wird jetzt das Api natürlich bei jedem Seitenaufruf ob Karte oder nicht mit geladen und verursacht schon mal Ladezeiten.

Wohin muss ich was packen damit es funktioniert ! Im Artikelfenster!
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Vielleicht kontaktierst Du mal semf wegen mod_gmap
http://community.conpresso.de/viewtopic.php?t=2931

Ist zwar anders konzipiert, aber vielleicht kommt was gemeinsames bei raus...
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Du könntest auch den Map-DIVs eine Klasse googleMap zuordnen und dann am Ende des Dokuments folgenden Code benutzen:

Code: Alles auswählen

<script language="JavaScript">
	var count=0;
	var divs=document.getElementsByTagName("DIV");
	for (i=0;i<divs.length;i++)
	{
		if (divs[i].className=="googleMap")
		{
			count++;
		}
	}
	if ( count > 0 )
	{
		// hier Dein funktionierender Code ...
	}
</script>
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
dD
ConPresso-User
Beiträge: 55
Registriert: 01.01.1970 01:00
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von dD »

Habs versucht, klappt aber irgend wie nicht so.
Vielleicht könntest du mir in Sachen j-Script mal ein wenig auf die Sprünge helfen, hab da echt gar keine Ahnung.

Code: Alles auswählen

    if (divs[i].className=="googleMap") 
Sollte die Klasse nicht einfach nur className=="map" heißen?
Hab beides Versucht, geht aber nicht, es wird gar nichts angezeigt.

und hab ich das dann so richtig eingebunden?

Code: Alles auswählen

<script language="JavaScript">
   var count=0;
   var divs=document.getElementsByTagName("DIV");
   for (i=0;i<divs.length;i++)
   {
      if (divs[i].className=="map")
      {
         count++;
      }
   }
   if ( count > 0 )
   {    
    // hier Dein funktionierender Code ...
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng( 51.631731, 6.204615), 14);
        var point = new GLatLng(51.631731, 6.204615);
          ..... hier kommen noch ein paar Optionen zwischen
      }
    }
    //]]>
   }
</script>   <!-- End of Google-Maps Script -->
Das erste Script mit dem Key hab ich jetzt noch oben drüber, muss das auch mit rein? Aber wie dann?

Code: Alles auswählen

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQI...hiermeinKey...xUEw&hl=de"
      type="text/javascript"></script>
und zuguterletzt, kann ich das so stehenlassen?

Code: Alles auswählen

<body onload="load()" onunload="GUnload()">
Wäre doch bestimmt toll wenn wir das irgendwie hin bekommen.
Mit dem Google-Api lässt sich da echt ein Menge Interessantes anstellen.

Ich würde mir als Dank auch die Mühe machen das ganze hier vernünftig zu Dokumentieren das alle was davon haben.
:wink:
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Ok, dann nennen wir die Klasse doch "Willi"...

Wichtig ist eben, daß diese jedem DIV zugeordnet wird.

Diese werden dann schlichtweg gezählt und wenn es mindestens 1 gibt, dann wird der Code eingebunden, sonst eben nicht.

Das onload mußt Du Dir dann natürlich verkneifen, weil es sonst ja doch IMMER statt nur bei Bedarf geladen wird.

Die Funktion wird am Ende des Scriptes statt mit dem Body geladen.

Code: Alles auswählen

<script language="JavaScript"> 
   var count=0; 
   var divs=document.getElementsByTagName("DIV"); 
   for (i=0;i<divs.length;i++) 
   { 
      if (divs[i].className=="map") 
      { 
         count++; 
      } 
   } 
   if ( count > 0 ) 
   {    
    // hier Dein funktionierender Code ... 
    //<![CDATA[ 

    function load() { 
      if (GBrowserIsCompatible()) { 
        var map = new GMap2(document.getElementById("map")); 
        map.setCenter(new GLatLng( 51.631731, 6.204615), 14); 
        var point = new GLatLng(51.631731, 6.204615); 
          ..... hier kommen noch ein paar Optionen zwischen 
      } 
    } 
    //]]> 

    load(); // und jetzt laden!

   } 
</script>   <!-- End of Google-Maps Script -->

Was da von Google-Maps an Script-Schnipseln benötigt wird darfst Du mich nicht fragen, daher habe ich auf semf verwiesen, der das ja schon gemacht hat...
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
dD
ConPresso-User
Beiträge: 55
Registriert: 01.01.1970 01:00
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von dD »

Hallo Markus,
vielen Dank für deine Mühe bisher aber es klappt einfach nicht.

Sobald ich den zweiten Scriptaufruf in die Schleife packe wird nichts mehr angezeigt. :?: :?:
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Nur mal so als Hinweis:

Es ist zwar ganz sinnvoll zu schreiben, was man da macht...

... aber effektiver ist es das Ergebnis (oder zumindest den vollständigen Code) zu zeigen, damit man auf Fehler beim "Machen" hingewiesen werden kann. Denn wie bei Dir ein "in die Schleife packen" aussieht kann ich mir nicht so wirklich vorstellen... :wink:
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
dD
ConPresso-User
Beiträge: 55
Registriert: 01.01.1970 01:00
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von dD »

OK, Verstanden!

Alte Version ohne Probleme

Code: Alles auswählen

<html>
<head>

.... CSS blabla

    <title>
        <?php echo htmlspecialchars($cpoRubricSettings['title']); ?>
    </title>

<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAdRyZ7q_TcIKid6oYsyXykxSCkhpLwxpv6_wo3A3LM93_WpTOWhQky-QYS_gw-as0tdw1eR5QKmxUEw&hl=de"
      type="text/javascript"></script>

  <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng( 51.631731, 6.204615), 14);
        var point = new GLatLng(51.631731, 6.204615);
        map.addOverlay(new GMarker(point));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
      }
    }
    //]]>
    </script>
</head>

<body onload="load()" onunload="GUnload()">
Dann im Artikel als HTML-Text

Code: Alles auswählen

<div id="map" style="width: 250px; height: 200px;">Google-Maps Karte</div>
So funktioniert es einwandfrei wird halt nur bei JEDER Seite geladen.

Hier die neue Version, die nicht funzt, keine Anzeige der Karte im (selben) Div id="map" ...

Code: Alles auswählen

    </title>

<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAdRyZ7q_TcIKid6oYsyXykxSCkhpLwxpv6_wo3A3LM93_WpTOWhQky-QYS_gw-as0tdw1eR5QKmxUEw&hl=de"
      type="text/javascript"></script>


<script language="JavaScript">
   var count=0;
   var divs=document.getElementsByTagName("DIV");
   for (i=0;i<divs.length;i++)
   {
      if (divs[i].className=="map")
      {
         count++;
      }
   }
   if ( count > 0 )
   {   
    // hier Dein funktionierender Code ...
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng( 51.631731, 6.204615), 14);
        var point = new GLatLng(51.631731, 6.204615);
        map.addOverlay(new GMarker(point));
      }
    }
    //]]>

    load(); // und jetzt laden!

   }
</script>   <!-- End of Google-Maps Script -->

<body onunload="GUnload()">

dD
ConPresso-User
Beiträge: 55
Registriert: 01.01.1970 01:00
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von dD »

Anmerkung:

Code: Alles auswählen

if (divs[i].className=="map") 
Hab es auch schon mit verschiedenen className=**** Versionen probiert

Habe auch schon probiert das div id="map" ... mit einem zweiten zu umschließen und auf das zu verweisen.

:? :?
Benutzeravatar
Mr. Magpie
ConPresso-Profi
Beiträge: 1004
Registriert: 01.01.1970 01:00
Wohnort: Wuppertal
Hat sich bedankt: 274 Mal
Danksagung erhalten: 59 Mal

Beitrag von Mr. Magpie »

dD hat geschrieben:Dann im Artikel als HTML-Text

Code: Alles auswählen

<div id="map" style="width: 250px; height: 200px;">Google-Maps Karte</div>
Vielleicht wäre hier statt id="map" ein class="map" geeigneter??
Günther Ludwig
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Ich hatte mir das ursprünglich so vorgestellt

Code: Alles auswählen

<div class="googleMap" id="map" style="width: 250px; height: 200px;">Google-Maps Karte</div>
Also map als id und googleMap als Klasse. Nicht oder...

Eine ID ist nun mal ein eindeutiger Bezeichner, der nicht für mehrfach vorkommende Objekte verwendet werden sollte.
Eine Klasse dagegen soll für mehrere Objekte benutzt werden.

Abgesehen davon ist es um Längen einfacher Klassen durch javascript zu identifizieren als IDs (aber nicht daß jetzt einer Code postet, womit es doch geht... ich sagte ja nur "einfacher"...)

Es gibt eben auch nur getElementById() (also EIN Element), dagegen kann getElementsByTagName() mehrere Elemente lesen. Und dort kann man mit className die Klasse abklopfen, was es als idName schlichtweg nicht gibt...
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Noch was:

mit "und dann am Ende des Dokuments folgenden Code benutzen" meinte ich direkt vor oder nach dem schließdenen </html> gaaaaaaanz am Ende der HTML-Seite, nicht etwa vor dem Body (der ja erst die DIVs mitbringt).

Also ans ENDE damit!

Was Du da versuchst ist wie Lottozahlen voraussagen... das ist auch viieeeel einfacher nach der Ziehung :wink:
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
dD
ConPresso-User
Beiträge: 55
Registriert: 01.01.1970 01:00
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von dD »

Danke!!
Warum so einfach wenns kompliziert viel mehr Spaß macht. :oops: :oops:

Script am Ende vor dem </html> war das Problem. JETZT GEHT's

Jetzt bleibt aber immer noch der Aufruf der API mit dem Key oben im Head.
Kann ich das auch noch irgendwo hin verbannen?

Code: Alles auswählen

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQI...hiermeinKey...xUEw&hl=de"
      type="text/javascript"></script> 
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Probiere doch sowas:

document.write('<script src="http:\/\/maps.google.com\/maps?file=api&v=2&key=ABQI...hiermeinKey...xUEw&hl=de" type="text\/javascript"><\/script>');

Also ebenfalls nur dann ins Dokument schreiben lassen, wenn da entsprechende DIVs drin sind. Muß eben nur vor der map-Definition passieren, damit dieses Objekt zur Verfügung steht.

Habe ich aber nicht getestet sondern ergoogelt...
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Die von Dir eingebundene Datei macht das übrigens selbst und definiert dafür die Funktion GScript(src)

Code: Alles auswählen

function GScript(src) {
document.write('<' + 'script src="' + src + '"' +' type="text/javascript"><' + '/script>');
}
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Antworten