php.de

Zurück   php.de > Webentwicklung > JavaScript, Ajax und mehr

JavaScript, Ajax und mehr dynamisches Scripten und Interaktion auf Clientebene

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 28.12.2009, 17:32  
Neuer Benutzer
 
Registriert seit: 10.11.2009
Beiträge: 28
PHP-Kenntnisse:
Anfänger
Blade kann nur auf Besserung hoffen
Standard Image in Info Fenster ?

Ich habe folgendes Problem: Ich verwende ein Google Maps API um Informationen auf eine Google Maps Seite an zu zeigen.

Leider komm ich einfach nicht dahinter, wie ich ein Bild in dem Info Fenster anzeigen lassen kann?

Ich weiß nicht welchen PHP Befehl ich dafür brauche. Habe zwar schon im Netz gesucht, konnte aber nichts passendes finden.

Könnt Ihr mir da weiter helfen?

Außerdem kann ich jetzt zwar klickbare Links anzeigen, ich möchte aber lieber einen Text anstelle der Web Adresse stehen haben. Das sieht einfach besser aus

Hier die phpsqlajax_genxml.php
PHP-Code:
<?php  

require("phpsqlajax_dbinfo.php"); 

// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node $dom->createElement("markers");
$parnode $dom->appendChild($node); 

// Opens a connection to a MySQL server

$connection=mysql_connect (localhost$username$password);
if (!
$connection) {  die('Not connected : ' mysql_error());} 

// Set the active MySQL database

$db_selected mysql_select_db($database$connection);
if (!
$db_selected) {
  die (
'Can\'t use db : ' mysql_error());

mysql_query("SET NAMES 'utf8'");
mysql_query("SET CHARACTER SET 'utf8'");

// Select all the rows in the markers table

$query "SELECT * FROM markers WHERE 1";
$result mysql_query($query);


if (!
$result) {  
  die(
'Invalid query: ' mysql_error());


header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){  
  
// ADD TO XML DOCUMENT NODE  
  
$node $dom->createElement("marker");  
  
$newnode $parnode->appendChild($node);   
  
$newnode->setAttribute("name",$row['name']);
  
$newnode->setAttribute("adresse"$row['adresse']);
  
$newnode->setAttribute("plz"$row['plz']);
  
$newnode->setAttribute("ort"$row['ort']);
  
$newnode->setAttribute("link"$row['link']);
  
$newnode->setAttribute("bilder"$row['bilder']);
  
$newnode->setAttribute("text"$row['text']);
  
$newnode->setAttribute("lat"$row['lat']);  
  
$newnode->setAttribute("lng"$row['lng']);  
  
$newnode->setAttribute("type"$row['type']);


echo 
$dom->saveXML();

?>
Hier die phpsqlajax_map.htm
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
  <
head>
    <
meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <
title>Google Maps AJAX mySQL/PHP Example</title>
    <
script src="http://maps.google.com/maps?file=api&v=2&key=api&v=2&key=ABQIAAAAXmADf_6tBOoKpOL7vEoN2xRyULF1bKDZZvW4qhxkkuradgJrBhQvVd-aiL9sTaIzSjlxBuGyKaT4LQ" 
       
type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["extended"] = iconBlue;
    customIcons["normal"] = iconRed;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(51.92277778, 10.43083333), 11);

        // Change this depending on the name of your PHP file
        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var adresse = markers[i].getAttribute("adresse");
            var plz = markers[i].getAttribute("plz");
            var ort = markers[i].getAttribute("ort");
            var link = markers[i].getAttribute("link");
            var bilder = markers[i].getAttribute("bilder");
            var text = markers[i].getAttribute("text");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, adresse, plz, ort, link, bilder, text, type);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, adresse, plz, ort, link, bilder, text, type) {
      var marker = new GMarker(point, customIcons[type]);
      var linkelement = "<a href=\""+link+"\">"+link+"</a>";
      var html = "<b>" + name + "</b> <br/>" + adresse + "<br/>" + plz + "&nbsp;" + ort + "<br><br/>" + linkelement + "<br><br/>" + text + bilder;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>
  </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 600px"></div>
  </body>
</html> 
Hier hab ich noch zwei Bilder wie es Falsch ist und wie es aus sehen soll. Als Visuelle Unterstützung

Blade ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 28.12.2009, 17:52  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Ich würde mal stark schätzen, dass Du eine absolute Bildadresse angeben mußt.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 28.12.2009, 21:43  
Neuer Benutzer
 
Registriert seit: 10.11.2009
Beiträge: 28
PHP-Kenntnisse:
Anfänger
Blade kann nur auf Besserung hoffen
Standard

Ich habe hier mal zwei Bilder meiner Datenbank erstellt. Habe ich da vielleicht etwas falsch Eingetragen?



-----------------------



@nikosch
, die Bilder liegen im gleichen Ordner wie die *.htm und *.php Dateien!
Blade ist offline   Mit Zitat antworten
Alt 28.12.2009, 22:14  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Das weiß doch aber Google nicht?!
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 29.12.2009, 10:06  
Neuer Benutzer
 
Registriert seit: 10.11.2009
Beiträge: 28
PHP-Kenntnisse:
Anfänger
Blade kann nur auf Besserung hoffen
Standard

Die Seite seht noch nicht Online. Sie läuft Zurzeit nur auf meinem XAMPP Server auf meinem Rechner. Deshlab schrieb ich ja, das die Bilder im gleichen Odner liegen wie alle anderen.

Ich vermute mal das ich einen php Befehl in die "phpsqlajax_map.htm" eingeben muss, um Bilder im Info Fenster zeigen zu können. So wie "linkelement" für Hyperlinks zuständig ist! Nur weiß ich nicht wie???

Sind denn die Einstellungen in der Datenbank unter Feld "bilder" überhaupt richtig? Ich habe da schon etwas mit MIME-Typ rum Experementiert, hat aber nicht das gewünschte Ergebnis gebracht.

Wie du siehst bin ich noch ein ziemlicher Anfäger. Ich habe schon vieles selber herraus gefunden. Doch manchmal brauche ich einfach noch eure Hilfe.
Wenn du mir also genauer erklären könntest, was du meinst und wie ich wo etwas veränder bzw. eintragen muss, um das gewünschte Ergebnis zu erziehlen, wäre ich dir sehr dankbar.
Blade ist offline   Mit Zitat antworten
Alt 29.12.2009, 14:03  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Die API funktioniert doch über Javascript. Es erfolgt doch also kein Bildupload (wäre auch nicht sehr sinnvoll). Woher also, soll Google Deiner Meinung nach das Bild holen? Von Deiner Festplatte?
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 30.12.2009, 17:45  
Erfahrener Benutzer
 
Benutzerbild von jw-lighting
 
Registriert seit: 25.03.2009
Beiträge: 126
PHP-Kenntnisse:
Fortgeschritten
jw-lighting befindet sich auf einem aufstrebenden Ast
jw-lighting eine Nachricht über ICQ schicken
Standard

Ich weiss nicht, ob ich jetzt völlig daneben liege, weil ich diese API nicht kenne.
Das was in der Infobox steht, ist doch HTML, oder?
Du hast aber doch nirgendwo ein img-Tag erzeugt, oder?
ich würde es ma so abwandeln:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps AJAX + mySQL/PHP Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=api&v=2&key=ABQIAAAAXmADf_6tBOoKpOL7vEoN2xRyULF1bKDZZvW4qhxkkuradgJrBhQvVd-aiL9sTaIzSjlxBuGyKaT4LQ" 
       type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["extended"] = iconBlue;
    customIcons["normal"] = iconRed;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(51.92277778, 10.43083333), 11);

        // Change this depending on the name of your PHP file
        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var adresse = markers[i].getAttribute("adresse");
            var plz = markers[i].getAttribute("plz");
            var ort = markers[i].getAttribute("ort");
            var link = markers[i].getAttribute("link");
            var bilder = markers[i].getAttribute("bilder");
            var text = markers[i].getAttribute("text");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, adresse, plz, ort, link, bilder, text, type);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, adresse, plz, ort, link, bilder, text, type) {
      var marker = new GMarker(point, customIcons[type]);
      var linkelement = "<a href=\""+link+"\">"+link+"</a>";
      var bildelement = (bilder != "") ? "<img src=\"" + bilder + "\" />" : ""; 
      var html = "<strong>" + name + "</strong> <br/>" + adresse + "<br/>" + plz + "&nbsp;" + ort + "<br/><br/>" + linkelement + "<br/><br/>" + text + bildelement;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>
  </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 600px"></div>
  </body>
</html>
Einen Alternativen Linktext musst du durch ein weiteres Attribut von 'marker' einarbeiten.
__________________
jw-lighting ist offline   Mit Zitat antworten
Alt 30.12.2009, 22:08  
Neuer Benutzer
 
Registriert seit: 10.11.2009
Beiträge: 28
PHP-Kenntnisse:
Anfänger
Blade kann nur auf Besserung hoffen
Standard

PHP-Code:
var bildelement = (bilder != "") ? "<img src=\"" bilder "\" />" ""
Spitze, genau das hab ich gemeint. Jetzt werden auch Bilder im Info Fenster angezeigt
Danke. Auf dich ist verlass


Zitat:
Einen Alternativen Linktext musst du durch ein weiteres Attribut von 'marker' einarbeiten.
Allerdings weiß ich jetzt noch nicht ganz genau wie ich dieses Attribut formulieren soll?
Blade ist offline   Mit Zitat antworten
Alt 01.01.2010, 20:55  
Erfahrener Benutzer
 
Benutzerbild von jw-lighting
 
Registriert seit: 25.03.2009
Beiträge: 126
PHP-Kenntnisse:
Fortgeschritten
jw-lighting befindet sich auf einem aufstrebenden Ast
jw-lighting eine Nachricht über ICQ schicken
Standard

Du musst es in mehreren Schritten ausarbeiten.
Damit noch ein wenig Lerneffekt übrigbleibt, möchte ich dir nicht gleich den fertigen Code vorkauen.

1.
Du erstellst dir ein Datenbankfeld mit dem Linktext.

2.
Wie du es mit den anderen feldern auch machst, liest du es aus der datenbank aus, und fügst es mit $newnode->setAttribute(...) in den marker ein.

3.
Du legst dir wie für die anderen Felder auch eine Variable im Javascript an wo du die Daten lädst, und übergibst die Variable wier die anderen auch an die Funktion mit der der Marker erstellt wird.

4.
Du baust die übergebene Variable an der richtigen Stelle ins Markup für den Marker ein.

LG:
jw-lighting

EDIT:
Falls der Textinhalt noch nicht richtig um das Bild herumfliesst, kannst du es hiermit versuchen:

PHP-Code:
var bildelement = (bilder != "") ? "<img src=\"" bilder "\" style=\"float:right;\" />" ""
Zum Verständniss:
Das
PHP-Code:
(bedingung) ? wenn_ja wenn_nein
ist einfach nur ein verkürztes if/else
__________________

Geändert von jw-lighting (01.01.2010 um 20:59 Uhr).
jw-lighting ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
variable mit onclick an php drombusch PHP Tipps 2009 8 30.08.2009 14:45
[Erledigt] PHP Image Upload &amp; Resize Problem da.eXecutoR PHP-Fortgeschrittene 10 14.08.2009 11:50
Bilder Klasse snatch-ic Beitragsarchiv 1 13.06.2007 11:45
Fenster schließen und neu öffnen lassen max-dhom HTML, Usability und Barrierefreiheit 2 01.04.2007 20:55
Ergebnis aus Fenster 1 in Fenster 2 übernehmen HaraDej HTML, Usability und Barrierefreiheit 2 21.04.2006 14:10
[Erledigt] info aus '&lt;form&gt; &lt;textarea name=&quot;info&quot; .. PHP Tipps 2006 5 16.02.2006 12:23
info aus '&amp;lt;form&amp;gt; &amp;lt;textarea name=&amp;quot;info&amp;quot; .. PHP Tipps 2006 1 16.02.2006 11:44
Verweis in bestimmtem Fenster öffnen HTML, Usability und Barrierefreiheit 3 11.02.2006 23:18
[Erledigt] closed()-Abfrage aus beliebigem Fenster HTML, Usability und Barrierefreiheit 2 16.01.2006 19:01
Links mit verschiedenen Inhalten und extra Fenster HTML, Usability und Barrierefreiheit 6 27.04.2005 22:23
Problem mit Wasserzeichen auf Bildern pixelcut PHP-Fortgeschrittene 16 14.12.2004 02:36
Neues Fenster Größe und Position HTML, Usability und Barrierefreiheit 9 26.10.2004 14:22
[Erledigt] on the fly fenster HTML, Usability und Barrierefreiheit 0 09.09.2004 22:06
[Erledigt] Fenster öffnen HTML, Usability und Barrierefreiheit 2 16.08.2004 13:19
Modales Fenster zur Eingabe von Daten HTML, Usability und Barrierefreiheit 0 22.06.2004 12:52

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
php infofenster, php info fenster, infofenster php, google maps infofenster größe, infofenster html, var linkelement = \<a href=\\\\ link \\\\>\ link \</a>\;, javascript infofenster, google maps infofenster mit bild, php dom setattribute &amp;lt;, google maps infofenster, google map php link in infofenster, google maps mysql infofenster mit link, google maps infofenster link, infofenster mit bild google maps, google maps infofenster bild, aus google maps infofenster neues fenster öffnen, html infofenster, openinfowindowhtml fenstergröße, google maps größe infofenster, php infofenster anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 10:58 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum