Google Maps

weissi

Grünschnabel
Hallo!

Ich habe mir aus verschiedenen Codeschnipsel ein Script zusammengestöpselt, welches Fotos aus einem Verzeichnis ausliest und sofern das Foto über Geokoordinaten verfügt, in Google Maps einen Marker setzt.

Nun möchte ich im Infofenster (= das Fenster, welches aufgeht wenn ich einen Marker anklicke) das Vorschaubild, welches in der *.jpg Datei gespeichert ist anzeigen.

Ich habe dieses bereits mit exif_thumbnail versucht, bekomme aber immer eine Fehlermeldung welche wie folgt lautet:
Cannot modify header information - headers already sent by (out

Ausserdem möchte ich, dass gleich mehrere Verzeichnisse ausgelesen werden und auch deren Unterverezeichnisse.

Kann mir bitte jemand weiterhelfen.
Besten Dank im voraus
weissi


Das Skript sieht momentan wie folgt aus:
PHP:
<?php 
$verzeichnis = "./xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/";
$gkey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

function convert_to_dec($value) {
$result = "";
 
if (isset($value)) {
eval ("\$result = 1.0*$value;");
}
return $result;
}



 ?>
<html>
<head>
<title></title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php echo $gkey; ?>" type="text/javascript"></script>
</head>
<body>

<div id='map' style='width: 100%; height: 450px'></div>

<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(+36.4124869999,-114.548824), 3);
  
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
 map.enableScrollWheelZoom();

  // Creates a marker whose info window displays the given number
  function createMarker(point, number)
  {
  var marker = new GMarker(point, icon);
  // Show this markers index in the info window when it is clicked
  var html = number;
  GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
  return marker;
  };

<?php 

$fh = opendir( $verzeichnis); //Verzeichnis
$verzeichnisinhalt = array();
while (true == ($file = readdir($fh)))
{
        if ((substr(strtolower($file), -3)=="jpg") or (substr(strtolower($file), -3)=="gif")) //Abfrage nach gültigen Datenformat        
        {        
            $bilderdateinamen[] = $_SERVER["DOCUMENT_ROOT"].dirname($_SERVER['PHP_SELF']).$verzeichnis.$file;
         }    
}


foreach ( $bilderdateinamen AS $dateiname )
{
  $exif = exif_read_data($dateiname);
    
  if ($exif &&  isset($exif['GPSLatitude'])) {
  $deg = convert_to_dec($exif['GPSLatitude'][0]);
  $min = convert_to_dec($exif['GPSLatitude'][1]);
  $sec = convert_to_dec($exif['GPSLatitude'][2]);

  $latitude = ($min * 60.0 + $sec)/60.0;
  $latitude = ($deg*60.0 + $latitude)/60.0;
}
else {
  $latitude = -1;
}

if ($exif &&  isset($exif['GPSLongitude'])) {
  $deg = convert_to_dec($exif['GPSLongitude'][0]);
  $min = convert_to_dec($exif['GPSLongitude'][1]);
  $sec = convert_to_dec($exif['GPSLongitude'][2]);

  $longitude = ($min * 60.0 + $sec)/60.0;
  $longitude = ($deg*60.0 + $longitude)/60.0;
}
else {
  $longitude = -1;
}

if ($latitude != -1 && $longitude != -1) {
  $node->location['latitude'] = $latitude;
  $node->location['longitude'] = $longitude;
  $node->location['lat'] = $latitude;
  $node->location['lon'] = $longitude;
}

if ( $exif && isset($exif['DateTime']) ) {
     $exif_datetime = $exif['DateTime'];
     $node->created = strtotime($exif_datetime);

     if ( $node->created == 0 ) {
       list($date, $time) = split(" ", $exif_datetime);
       list($year, $month, $day) = split(":",$date);
}}


if($exif['GPSLatitudeRef'] == "N") {
  $lat_vorzeichen= "+";
} elseif ($exif['GPSLatitudeRef'] == "S") {
  $lat_vorzeichen= "-";
} else {
  $lat_vorzeichen= "";
} 

if($exif['GPSLongitudeRef'] == "W") {
  $lon_vorzeichen= "-";
} elseif ($exif['GPSLongitudeRef'] == "E") {
  $lon_vorzeichen= "+";
} else {
  $lon_vorzeichen= "";
} 





if (($latitude=="+1" || $latitude=="-1") && ($longitude=1 || $longitude="-1")) echo ""; else 
                {  
?>
var point = new GPoint(<?php echo $lon_vorzeichen.$longitude.','.$lat_vorzeichen.$latitude; ?>);
var marker = createMarker(point, '<?php if ($exif['Title']=="" && $exif['Comments']=="") echo ""; else {echo "";}?><?php if ($exif['Title']>"" && $exif['Comments']=="") echo "<b>".$exif['Title']."</b><br>"; else {echo "";}?><?php if ($exif['Title']=="" && $exif['Comments']>"") echo "<b>".$exif['Comments']."</b><br>"; else {echo "";}?><?php if ($exif['Title']>"" && $exif['Comments']>"") echo "<b>".$exif['Title']."</b><br>".$exif['Comments']."<br>"; else {echo "";}?><?php if (($latitude=="+1" || $latitude=="-1") && ($longitude=1 || $longitude="-1")) echo ""; else {echo "<br>Latitude: ". $lat_vorzeichen.$latitude. "<br>Longitude: ". $lon_vorzeichen.$longitude;}?><?php echo $de; ?>');
map.addOverlay(marker);

<?php 
                }
}

?>
 //]]> </script>
 
</body>
</html>
 
Moin,

Diese Fehlermeldung, kommt die auch, wenn du exif_read_data() verwendest?

Falls ja, kannst du mal bitte den kompletten Wortlaut der Fehlermeldung posten, und das, was in der am Ende der Fehlermeldung genannten Zeile steht?

Falls nein...was funktioniert nicht? :)
 
Zuletzt bearbeitet:
Hallo Sven,

Danke für die Antwort.

Der Code, welchen ich in meinem 1. Beitrag veröffentlicht habe funktioniert. Ich weiss nur nicht, wie ich das Thumbnail im Infofenster anzeigen kann.

Ich verwende exif_read_data.
Kann ich mit dieser Funktion auch das Thumbnail des Originalfoto im Infofenster anzeigen lassen?
Wenn ja, wie?

Die nachfolgende Funktion exif_thumbnail kann ich aufgrund fehlender Programmierkenntnise nicht richtig im Code unterbringen.
PHP:
<?php
if (array_key_exists('file', $_REQUEST)) {
    $image = exif_thumbnail($_REQUEST['file'], $width, $height, $type);
} else {
    $image = false;
}
if ($image!==false) {
    header('Content-type: ' .image_type_to_mime_type($type));
    echo $image;
    exit;
} else {
    // no thumbnail available, handle the error here
    echo 'No thumbnail available';
}
?>


Ausserdem möchte ich, dass gleich mehrere Verzeichnisse ausgelesen werden können und auch deren Unterverezeichnisse. Ich habe keine Ahnung wie ich dass zustandebringe.

Ich bin Dankbar für jede Hilfe.

Gruß
Weissi
 
Nö, so kannst du dies Thumbnail dort nicht ausgeben.
Du müsstest ein weiteres Skript haben, welches du in einem <img> -Element als src angibst.
Diesem übergibst du als Parameter den Pfad zur Grafik....es kann dann anhand dessen das Bild ausgeben.

Was das Auslesen von Verzeichnissen angeht, da solltest du im Forum 1001 Themen diesbezüglich finden, das dürfte bestimmt etwas Passendes dabei sein für dich :)
 
N'abend!

Vielen Dank für den <img> Tip Sven.
Die Thumbs werden nun angezeigt.

Das Problem, dass mehrere Verzeichnisse samt Unterverzeichnissen eingelesen werden konnte ich leider noch nicht lösen.

Vielleich hat jemand einen Tip für mich.

Gruß
Weissi

Code Letztstand:
PHP:
<?php 
$verzeichnis = "./xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/";
$gkey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

function convert_to_dec($value) {
$result = "";
 
if (isset($value)) {
eval ("\$result = 1.0*$value;");
}
return $result;
}



 ?>
<html>
<head>
<title></title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php echo $gkey; ?>" type="text/javascript"></script>
</head>
<body>

<div id='map' style='width: 100%; height: 450px'></div>

<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(+36.4124869999,-114.548824), 3);
  
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
 map.enableScrollWheelZoom();

  // Creates a marker whose info window displays the given number
  function createMarker(point, number)
  {
  var marker = new GMarker(point, icon);
  // Show this markers index in the info window when it is clicked
  var html = number;
  GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
  return marker;
  };

<?php 

$fh = opendir( $verzeichnis); //Verzeichnis
$verzeichnisinhalt = array();
while (true == ($file = readdir($fh)))
{
        if ((substr(strtolower($file), -3)=="jpg") or (substr(strtolower($file), -3)=="gif")) //Abfrage nach gültigen Datenformat        
        {        
            $bilderdateinamen[] = $_SERVER["DOCUMENT_ROOT"].dirname($_SERVER['PHP_SELF']).$verzeichnis.$file;
         }    
}


foreach ( $bilderdateinamen AS $dateiname )
{
  $exif = exif_read_data($dateiname);
    
  if ($exif &&  isset($exif['GPSLatitude'])) {
  $deg = convert_to_dec($exif['GPSLatitude'][0]);
  $min = convert_to_dec($exif['GPSLatitude'][1]);
  $sec = convert_to_dec($exif['GPSLatitude'][2]);

  $latitude = ($min * 60.0 + $sec)/60.0;
  $latitude = ($deg*60.0 + $latitude)/60.0;
}
else {
  $latitude = -1;
}

if ($exif &&  isset($exif['GPSLongitude'])) {
  $deg = convert_to_dec($exif['GPSLongitude'][0]);
  $min = convert_to_dec($exif['GPSLongitude'][1]);
  $sec = convert_to_dec($exif['GPSLongitude'][2]);

  $longitude = ($min * 60.0 + $sec)/60.0;
  $longitude = ($deg*60.0 + $longitude)/60.0;
}
else {
  $longitude = -1;
}

if ($latitude != -1 && $longitude != -1) {
  $node->location['latitude'] = $latitude;
  $node->location['longitude'] = $longitude;
  $node->location['lat'] = $latitude;
  $node->location['lon'] = $longitude;
}

if($exif['GPSLatitudeRef'] == "N") {
  $lat_vorzeichen= "+";
} elseif ($exif['GPSLatitudeRef'] == "S") {
  $lat_vorzeichen= "-";
} else {
  $lat_vorzeichen= "";
} 

if($exif['GPSLongitudeRef'] == "W") {
  $lon_vorzeichen= "-";
} elseif ($exif['GPSLongitudeRef'] == "E") {
  $lon_vorzeichen= "+";
} else {
  $lon_vorzeichen= "";
} 




if ( $exif && isset($exif['DateTime']) ) {
     $exif_datetime = $exif['DateTime'];
     $node->created = strtotime($exif_datetime);

     if ( $node->created == 0 ) {
       list($date, $time) = split(" ", $exif_datetime);
       list($year, $month, $day) = split(":",$date);
}}



if (($latitude=="+1" || $latitude=="-1") && ($longitude=1 || $longitude="-1")) echo ""; else 
                {  
?>
var point = new GPoint(<?php echo $lon_vorzeichen.$longitude.','.$lat_vorzeichen.$latitude; ?>);
var marker = createMarker(point, '<?php 
if ($exif['Title']=="" && $exif['Comments']=="") echo ""; else {echo "";}
if ($exif['Title']>"" && $exif['Comments']=="") echo "<b>".$exif['Title']."</b><br>"; else {echo "";}
if ($exif['Title']=="" && $exif['Comments']>"") echo "<b>".$exif['Comments']."</b><br>"; else {echo "";}
if ($exif['Title']>"" && $exif['Comments']>"") echo "<b>".$exif['Title']."</b><br>".$exif['Comments']."<br>"; else {echo "";}

$image = exif_thumbnail($dateiname, $width, $height, $type);
echo "<img  src=\"data:image/gif;base64,".base64_encode($image)."\">";

if (($latitude=="+1" || $latitude=="-1") && ($longitude=1 || $longitude="-1")) echo ""; else {echo "<br>Latitude: ". $lat_vorzeichen.$latitude. "<br>Longitude: ". $lon_vorzeichen.$longitude;}
?>');
map.addOverlay(marker);


<?php 
                }
}

?>
 //]]> </script>
 
</body>
</html>
 
Danke sehr!
Ich konnte etwas finden. Nur leider habe ich keine Ahnung wie ich diese Funktion im bestehenden Script anwenden kann.

Bitte nochmals um Deine/Eure Hilfe. Danke.

PHP:
function listfiles($dir) {
    //chdir($dir);
    $files = opendir(".");
    while ( $entry = readdir($files) ) {
     if ((substr(strtolower($entry), -3)=="jpg") or (substr(strtolower($entry), -3)=="png")) { // Bilder filtern 
        $pfad = getcwd();
        //echo $pfad;
        if ( is_file($entry)  ) {
            echo "2".$pfad."/".$entry."<br>";
        }
    }
        if ( is_dir($entry) and $entry != "." and $entry != ".."  ) {
            chdir($pfad."/".$entry);
            listfiles($entry);
            chdir("..");
        }
    }
    closedir($files);
}

//Zum gewünschten Pfad wechseln
chdir("./1");

//Auslesen starten
listfiles(".");
 
Hallo!

ich konnte mein Vorhaben soweit umsetzten. Das Script funktioniert soweit.
Nachfolgend der vollständige Code:

Kann jemand bezüglich der Anzeige des Thumbnails einen Verbesserungsvorschlag machen?
Derzeit werden beim betrachten des Quelltextes anstatt des Bildpfades base64 Zeichencodes ausgegeben. Das macht den Quelltext sehr unübersichtlich.

Bei einem Verzeichnis mit mehreren 1000 Bildern dauert das Laden der Seite sehr lange. Vielleicht hat jemand eine Idee dazu. Evtl. Schrittweise laden je nach Zoomstufe von Google etc...

Danke und Gruß
weissi


PHP:
<?php
$verzeichnis = "./xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
$gkey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

function convert_to_dec($value) {
$result = "";
     if (isset($value))
     {
       eval ("\$result = 1.0*$value;");
     }
return $result;
}

function dec2sex($decimal) {
      if (!is_numeric($decimal))
      return false;

$h = floor($decimal);
$decimal = ($decimal-$h)*60;
$m = floor($decimal);
$decimal = ($decimal-$m)*60;
$s = round($decimal);
return sprintf('%02d° %02d\' %02d"', $h, $m, $s);
}

function read_recursiv($path) 
   { 
      $result = array();
      $handle = opendir($path); 
      if ($handle) 
      { 
         while (false !== ($file = readdir($handle))) 
         { 
             if ($file != "." && $file != "..") 
             { 
                $name = $path . "/" . $file;
                if (is_dir($name))
                { 
                   $ar = read_recursiv($name);
                   foreach ($ar as $value)
                   {
                      $result[] = $value;
                   }
                } 
                else 
                { 
                   $result[] = $name;
                } 
             } 
         } 
      } 
      closedir($handle);
      return $result; 
   } 

   $data = read_recursiv($verzeichnis); 
 
/*    echo "<b>" . count($data) . "Dateien gefunden</b><br>\n";
   foreach($data as $value)
     echo "$value<br>\n";  */

 ?>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
<!--
body {
	font-family:  Verdana, Arial, Helvetica, sans-serif;
}

-->
</style>


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php echo $gkey; ?>" type="text/javascript"></script>
</head>
<body>

<div id='map' style='width: 100%; height: 450px'></div>

<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(+36.4124869999,-114.548824), 3);
  
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
 map.enableScrollWheelZoom();

  // Creates a marker whose info window displays the given number
  function createMarker(point, number)
  {
  var marker = new GMarker(point, icon);
  // Show this markers index in the info window when it is clicked
  var html = number;
  GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
  return marker;
  };

<?php 
foreach ( $data AS $dateiname )
{
  $exif = exif_read_data($dateiname);
    
  if ($exif &&  isset($exif['GPSLatitude'])) {
  $deg = convert_to_dec($exif['GPSLatitude'][0]);
  $min = convert_to_dec($exif['GPSLatitude'][1]);
  $sec = convert_to_dec($exif['GPSLatitude'][2]);

  $latitude = ($min * 60.0 + $sec)/60.0;
  $latitude = ($deg*60.0 + $latitude)/60.0;
}
else {$latitude = -1;}

if ($exif &&  isset($exif['GPSLongitude']))
{
  $deg = convert_to_dec($exif['GPSLongitude'][0]);
  $min = convert_to_dec($exif['GPSLongitude'][1]);
  $sec = convert_to_dec($exif['GPSLongitude'][2]);

  $longitude = ($min * 60.0 + $sec)/60.0;
  $longitude = ($deg*60.0 + $longitude)/60.0;
}
else {$longitude = -1;}

if ($latitude != -1 && $longitude != -1) 
{
  $node->location['latitude'] = $latitude;
  $node->location['longitude'] = $longitude;
  $node->location['lat'] = $latitude;
  $node->location['lon'] = $longitude;
}

if($exif['GPSLatitudeRef'] == "N") {$lat_vorzeichen= "+";} elseif ($exif['GPSLatitudeRef'] == "S") {$lat_vorzeichen= "-";} else {$lat_vorzeichen= "";}
if($exif['GPSLongitudeRef'] == "W") {$lon_vorzeichen= "-";} elseif ($exif['GPSLongitudeRef'] == "E") {$lon_vorzeichen= "+";} else {$lon_vorzeichen= "";} 

if ( $exif && isset($exif['DateTime'])) 
{
$exif_datetime = $exif['DateTime'];
$node->created = strtotime($exif_datetime);

if ( $node->created == 0 ) 
   {
       list($date, $time) = split(" ", $exif_datetime);
       list($year, $month, $day) = split(":",$date);
   }
}




if (($latitude=="+1" || $latitude=="-1") && ($longitude=1 || $longitude="-1")) echo ""; else 
{  
?>
var point = new GPoint(<?php echo $lon_vorzeichen.$longitude.','.$lat_vorzeichen.$latitude; ?>);
var marker = createMarker(point, '<table cellpadding="2px" cellspacing="0" style="font-size: 78%" width="310px" border="1"><?php if ($exif['Title']=="" && $exif['Comments']=="") echo ""; else {echo "";}
if ($exif['Title']>"" && $exif['Comments']=="") echo "<tr><td colspan=\"2\"><b>".$exif['Title']."</b></td></tr>"; else {echo "";}
if ($exif['Title']=="" && $exif['Comments']>"") echo "<tr><td colspan=\"2\"><b>".$exif['Comments']."</b></td></tr>"; else {echo "";}
if ($exif['Title']>"" && $exif['Comments']>"") echo "<tr><td colspan=\"2\"><b>".$exif['Title']."</b></td></tr><tr><td colspan=\"2\">".$exif['Comments']."</td></tr>"; else {echo "";}
echo "<tr><td valign=\"top\">";
$image = exif_thumbnail($dateiname, $width, $height, $type);

echo "<a href=\"$dateiname\" target=\"_blank\">";
echo "<img  src=\"data:image/gif;base64,".base64_encode($image)."\">";
echo"</a>"; 

echo "</td><td width=\"100%\" style=\"font-size: 76%\" valign=\"top\">";
if (($latitude=="+1" || $latitude=="-1") && ($longitude=1 || $longitude="-1")) echo ""; else {echo "<b>Latitude:</b> ". dec2sex($lat_vorzeichen.$latitude). "<br><b>Longitude:</b> ". dec2sex($lon_vorzeichen.$longitude);}
echo "</td><tr></table>";
?>');
map.addOverlay(marker);


<?php 
}
}
?>
 //]]> </script>
 
</body>
</html>
 
Moin,

Du wirst ja wohl kaum 1000 Thumbnails gleichzeitig anzeigen, warum kümmerst du dich um die Thumbnails nicht erst dann, wenn sie benötigt werden...also sobald ein InfoWindow geöffnet werden soll?
 
Hallo!

Da hast du recht.
Ich möchte nicht 1000-e Fotos gleichzeitig anzeigen.
Es soll aber für jedes Foto mit Koordinaten ein Pin auf der Landkarte angezeigt werden.

Beim Klick auf den Pin kann das Thumbnail geladen werden?
Wie kann ich das am besten umsetzen? Ich habe keine Ahnung.

Danke für die vielen Tips.
Gruß
Weissi
 

Neue Beiträge

Zurück