Ergebnis 1 bis 5 von 5

Thema: google maps api + lightbox

  1. #1
    Meister(in)
    Registriert seit
    05.03.2006
    Alter
    29
    Beiträge
    432
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard google maps api + lightbox

    Nabend,

    ich binde gerade Google Maps in eine bestehende Seite ein und will in einem Info-Fenster (so eine Sprechblase an einem Marker auf der Karte) Bilder darstellen und "lightboxen"...

    Funktioniert auch soweit, mit der Einschränkung, dass man den Marker auf der Karte zwei mal anklicken muss damit lightbox funktioniert. Also die Sprechblase muss sozusagen zwei mal geladen werden damit es geht.

    Hier der gekürzte Quelltext:
    PHP-Code:
    <script type="text/javascript">
        var map;
        var gdir;

        var objectIcon = new GIcon(G_DEFAULT_ICON);
        objectIcon.image = "/images/map.icon.png";
        objectIcon.shadow = "";
        objectIcon.iconSize = new GSize(30, 30);
        objectIcon.iconAnchor = new GPoint(15, 15);
        objectIcon.infoWindowAnchor = new GPoint(35, 5);
        objectIcon.imageMap = new Array(0,0, 30,0, 30,30, 0,30);
        
        var geocoder = new GClientGeocoder();
        
        function initialize()
        {
            if (GBrowserIsCompatible())
            {
                var map = new GMap2(document.getElementById("map"));
                map.setCenter(new GLatLng(51.2, 10.2), 6);
                
                <?php #### Hier werden die Marker gesetzt #### ?>
                    geocoder.getLatLng(
                        '<?= $sAddress ?>',
                        function(point) {
                            if (point) {
                                var marker1 = new GMarker(point, {icon: objectIcon});
                                GEvent.addListener(marker1, 'click', function() {
                                    marker1.openInfoWindowHtml(
                                        <?php #### und hier werden die Bilder ausgegeben #### ?>
                                        '<a  href="/images/abc.jpg" rel="lightbox[gallery]"><img src="/images/abc.mini.jpg" alt="abc"  /></a>'
                                        + '<a  href="/images/yxz.jpg" rel="lightbox[gallery]"><img src="/images/xyz.mini.jpg" alt="xyz"  /></a>'
                                    );
                                   <?php #### und lightbox initialisieren,  nachdem die Bilder geladen wurden, deshalb IM click event des Markers  #### ?>
                                    var box = new Lightbox();
                                    map.panTo(point);
                                });
                                map.addOverlay(marker1);
                            }
                        }
                    );
            }
        }
    </script>
    Und hier im Kontext:
    PHP-Code:
    <script type="text/javascript">
        var map;
        var gdir;

        var objectIcon = new GIcon(G_DEFAULT_ICON);
        objectIcon.image = "/img/map.icon.object.png";
        objectIcon.shadow = "";
        objectIcon.iconSize = new GSize(30, 30);
        objectIcon.iconAnchor = new GPoint(15, 15);
        objectIcon.infoWindowAnchor = new GPoint(35, 5);
        objectIcon.imageMap = new Array(0,0, 30,0, 30,30, 0,30);
        
        var geocoder = new GClientGeocoder();
        
        function initialize()
        {
            if (GBrowserIsCompatible())
            {
                var mapTypes = G_DEFAULT_MAP_TYPES;
                for(var i = 0; i < mapTypes.length; i++){
                    mapTypes[i].getMaximumResolution = function(latlng){ return 13;};
                    mapTypes[i].getMinimumResolution = function(latlng){ return 5;};
                }
                var map = new GMap2(document.getElementById("map_canvas"), {mapTypes: mapTypes});
                map.addControl(new GLargeMapControl());
                map.setCenter(new GLatLng(51.2, 10.2), 6);
                
                <?php #### Hier werden die Marker gesetzt ####
                
    foreach ($aObjects as $aObject)
                {
                    
    $sAddress $aObject["object_street"] . " " $aObject["object_number"] . ", "
                    
    $aObject["object_zip"] . " " $aObject["object_city"] . ", "
                    
    $aObject["object_federalstate"] . ", "
                    
    $aObject["object_country"];
                    
    $sAddress str_replace(",,"","$sAddress);
                    
                    
    $aImages $oObjects->getObjectImages($aObject["id"]);
                    
    $aObjectsInvestorIds $oObjects->getObjectsInvestorIds($aObject["id"]);
                    
    ?>
                    geocoder.getLatLng(
                        '<?= $sAddress ?>',
                        function(point) {
                            if (point) {
                                var marker1 = new GMarker(point, {icon: objectIcon});
                                GEvent.addListener(marker1, 'click', function() {
                                    marker1.openInfoWindowHtml(
                                        '<h1 class="headline"><?= $aObject["object_title"?></h1>'
                                        + '<?= $aObject["object_zip"?> <?= $aObject["object_city"?><br />'
                                        + '<br />'
                                        + 'Nutzfläche: <?= $aObject["object_area"?> m²<br />'
                                        + '<br />'
                                        <?php #### und hier werden die Bilder ausgegeben ####
                                        
    if (count($aImages))
                                        {
                                            
    ?>
                                            + '<div style="width: 505px">'
                                            <?php
                                            
    foreach ($aImages as $aImage)
                                            {
                                                
    ?>+ '<a href="/img/objects/<?= $aObject["id"] . ".big." $aImage["image_name"?>" rel="lightbox[gallery]"><img style="margin: 2px;" src="/img/objects/<?= $aObject["id"] . ".mini." $aImage["image_name"?>" alt="<?= $aImage["image_name"?>" /></a>'<?php
                                            
    }
                                            
    ?>
                                            + '</div><br class="clear" />'
                                            <?php
                                        
    }
                                        if (
    $oUser->bLoggedIn)
                                        {
                                            if (
    $oUser->aCurrent["user_role"] == "investor")
                                            {
                                            
    ?>
                                            + '<fieldset class="align-c" style="padding: 0;">'
                                                + '<a href="#" id="switchobjectinvestor" class="object<?= in_array($oUser->aCurrent["id"], $aObjectsInvestorIds) ? "removefrominvestor_map" "addtoinvestor_map" ?>"><?= in_array($oUser->aCurrent["id"], $aObjectsInvestorIds) ? "Dieses Angebot befindet sich bereits auf Ihrer Angebotsliste.<br />Angebot von Liste entfernen?" "Möchten Sie dieses Angebot in Ihre Angebotsliste übernehmen?" ?></a><br class="clear" />'
                                            + '</fieldset><br />'
                                            <?php
                                            
    }
                                        }
                                        else
                                        {
                                            
    ?>
                                            + '<fieldset class="align-c" style="padding: 0;">'
                                                + '<a href="/user/investors/register/o.<?= $aObject["id"?>" class="objectaddtoinvestor_map">Sie interessieren Sich für dieses Angebot und wünschen weitere Informationen?<br />Nehmen Sie hier Kontakt zu uns auf!</a><br class="clear" />'
                                            + '</fieldset><br />'
                                            <?php
                                        
    }
                                        
    ?>                                    
                                    );
                                    <?php
                                    
    if ($oUser->bLoggedIn && $oUser->aCurrent["user_role"] == "investor")
                                    {
                                        
    ?>
                                        $('switchobjectinvestor').addEvent('click', function(e) {
                                            e.stop();
                                            if (this.hasClass('objectremovefrominvestor_map'))
                                            {
                                                var myRequest = new Request({url: '/objects/object/object.remove/id.<?= $iObjectId ?>'});
                                                myRequest.send();
                                                this.innerHTML = 'Möchten Sie dieses Angebot in Ihre Angebotsliste übernehmen?<br />';
                                                this.removeClass('objectremovefrominvestor_map');
                                                this.addClass('objectaddtoinvestor_map');
                                            }
                                            else if (this.hasClass('objectaddtoinvestor_map'))
                                            {
                                                var myRequest = new Request({url: '/objects/object/object.add/id.<?= $iObjectId ?>'});
                                                myRequest.send();
                                                this.innerHTML = 'Dieses Angebot befindet sich bereits auf Ihrer Angebotsliste.<br />Angebot von Liste entfernen?';
                                                this.removeClass('objectaddtoinvestor_map');
                                                this.addClass('objectremovefrominvestor_map');
                                            }
                                        });
                                        <?php
                                    
    }
                                    
    #### und lightbox initialisieren, nachdem die Bilder geladen wurden, deshalb IM click event des Markers #### ?>
                                    var box = new Lightbox();
                                    map.panTo(point);
                                });
                                map.addOverlay(marker1);
                            }
                        }
                    );
                    <?php
                
    }
                
    ?>
            }
        }
    </script>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von FaFoo (05.02.2011 um 06:38 Uhr)

  2. #2
    Meister(in) Avatar von Gebby
    Registriert seit
    17.07.2008
    Ort
    Berlin
    Alter
    56
    Beiträge
    347
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: google maps api + lightbox

    Dann lass die - weg. So funktioniert der Link halt nicht.
    Niemals provozieren lassen, jeder darf seine Meinung haben.

  3. #3
    Meister(in)
    Themenstarter

    Registriert seit
    05.03.2006
    Alter
    29
    Beiträge
    432
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: google maps api + lightbox

    äh sry aber du wirst doch wohl in der lage sein die striche manuell zu entfernen oder? o.0
    ich will halt nicht dass man diese Beiträge hier findet wenn man nach dachp... sucht
    Geändert von FaFoo (02.02.2011 um 23:06 Uhr)

  4. #4
    Meister(in) Avatar von Gebby
    Registriert seit
    17.07.2008
    Ort
    Berlin
    Alter
    56
    Beiträge
    347
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: google maps api + lightbox

    Witzig, dann lass mal Google nach deinem ausgeschriebenen dachp... suchen
    Niemals provozieren lassen, jeder darf seine Meinung haben.

  5. #5
    Meister(in)
    Themenstarter

    Registriert seit
    05.03.2006
    Alter
    29
    Beiträge
    432
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: google maps api + lightbox

    Ja ich weiß, löschen kann ich das aber nicht mehr, bearbeiten auch nicht... aber back to topic pls, haste ne Idee?

    Hab jetzt zwar erstmal eine vorläufige Lösung, die Sprechblase einfach pauschal am anfang einmal öffnen und schließen, nur würde mich natürlich trotzdem interessieren wieso das so ist wie es ist.

    Das Provisorium:
    PHP-Code:
    map.addOverlay(marker1);
    marker1.openInfoWindowHtml();
    (function() {
    marker1.closeInfoWindow();}).delay(200); 
    Die delay-Funktion ist von Mootools und notwendig...
    Geändert von FaFoo (03.02.2011 um 17:36 Uhr)

Ähnliche Themen

  1. google maps
    Von draugal im Forum HTML & CSS Forum
    Antworten: 17
    Letzter Beitrag: 27.11.2010, 04:00
  2. Google maps
    Von anfänger-in-php im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 28.07.2010, 23:44
  3. Google Maps Routing Optionen
    Von FaFoo im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 25.02.2009, 12:08
  4. google-maps Alternativen
    Von Questionmark im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 03.11.2008, 17:26
  5. google maps in thickbox
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 10.10.2008, 11:50

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •