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