Author Topic: [MOD] Google ClusterPhotomap erstellen  (Read 18936 times)

0 Members and 1 Guest are viewing this topic.

rinaldos

  • Guest
[MOD] Google ClusterPhotomap erstellen
« on: July 01, 2009, 07:23:21 PM »
Basierend auf dieser Modifikation habe ich ein Google Maps Clustering entworfen. Dies poste ich in einem extra Thread, damit der andere Thread nicht zu unüberischtlich wird.

Sehr hilfreich war diese Seite, wo auch einige Java Dateien her sind, die der GNU GPL unterliegen.
http://www.gnu.de/documents/gpl.de.html  Diese Lizenz bezieht sich auf folgende Dateien:
/js/ClusterMarker.js
/js/HtmlControl.js

http://googlemapsapi.martinpearman.co.uk/readarticle.php?article_id=2

Hier der Thread Google Photomaps erstellen.... http://www.4homepages.de/forum/index.php?topic=21306.0

WICHTIG. Für den Befehl json_encode ist folgende PHP Version notwendig:
(PHP 5 >= 5.2.0, PECL json >= 1.2.0)
Quelle:
http://php.net/manual/en/function.json-encode.php


Da das Clustering (so wie ich es einsetze auf JSON basiert) wurden folgende Dateien neu erstellt:

/google-photo-map.php
/js/gm.js
/js/HtmlControl.css (im beiligenden Zip)
/js/HtmlControl.js (im beiligenden Zip)
/js/ClusterMarker.js (im beiligenden Zip)
/deintemplatefolder/google-photo-map.html

erstelle nun erstmal in deinem Template Verzeichnis die datei: google-photo-map.html Ich verwende hier den TWEAK UNIVERSAL LAYOUT: http://www.4homepages.de/forum/index.php?topic=18926.0 Daher achtet bitte bei Euch auf Euer Design.....
{ste_layout_top},{ste_layout_left},{google_map},{ste_layout_below} braucht Ihr nicht mit zu übernehmen. Diese Werte könnt Ihr entfernen und der Rest muss an Euer Design angepasst werden.!

Ach habe ich eben noch vergessen. Achtet auf die Pfade, kann sein das Ihr die absoluten Pfade angeben müsst. Und natürlich Euren API Key einsetzen. Danke an Bergblume für den Hinweis ....


{header}
<
script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAwih12D7l027qm_WSSBUxUhQtT0ZD6beqSUxvyAJf-R4Qq4ty0BQ87ArErRiVqe9wVg8aoc9alR5izg"></script>
<
script type="text/javascript" src="js/gm.js"></script>
<
link type="text/css" rel="stylesheet" href="js/HtmlControl.css" />
<
script type="text/javascript" src="js/ClusterMarker.js"></script>
<
script type="text/javascript" src="js/HtmlControl.js"></script>
<
script type="text/javascript" src="/google-photo-map.php"></script>
<
body onload="myOnLoad()" onunload="GUnload()">

{
ste_layout_top}
{
ste_layout_left}
{
google_map}
<
table width="95%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
 <
tr>
  <
td valign ="top" align="center"><font color="black">
   <
table width="95%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
     <
tr>
      <
td bgcolor="white">
       <
table width="95%" border="0" cellspacing="5" cellpadding="0" class="td7" bgcolor="white" align="center" >
        <
tr>
         <
td bgcolor="white">
          <
table width="95%" border="0" cellpadding="3" cellspacing="0" bgcolor="#ffffff">
           <
tr>
            <
td rowspan="2">
            <
div id="maptitel">&nbsp;Zoomkarte&nbsp;</div>
            <
div id="map" style="width: 600px; height: 512px; border:1px solid grey;"></div>
            </
td>
           </
tr>
          </
table>
         </
td>
        </
tr>
       </
table>
      </
td>
     </
tr>
    </
table>
   </
td>
  </
tr>
  <
tr>
   <
td width="7px"><img src="{template_url}/images/content-bottom-bg1.gif" alt="rulu"></td>
  </
tr>
</
table>
</
div>
{
ste_layout_below}
{
footer}


erstelle nun die Datei /js/gm.js
Die Werte Array[] können auf den Mittelpunkt Eurer Karte eingestellt werden. Das Script zentriert aber die Karte anhand der Marker selber


Array[0] ='50.94160997'//LATITUDE
Array[1] = '6.96867943'// LONGITUDE
Array[2] = 2//ZOOMLEVEL

var mapcluster;

function 
myOnLoad() {
    if (
GBrowserIsCompatible()) {
        
map=new GMap2(document.getElementById('map'));
        
map.setCenter(new GLatLng( Array[0],Array[1] ), Array[2]);
        
map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(77)));
        
map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(728)));
        
map.enableDoubleClickZoom();
        
map.enableContinuousZoom();
        
map.addMapType(G_PHYSICAL_MAP);

        var 
markermarkersArray=[];
        for (var 
i=0i<json.lengthi++) {
        
marker=createTabbedMarker(new GLatLng(json[i].latjson[i].lng), json[i].idjson[i].namejson[i].image_idjson[i].descjson[i].cat_idjson[i].image_media_filesjson[i].cat_name,json[i].latjson[i].lng);
            
markersArray.push(marker);
        }
        
        
cluster=new ClusterMarker(map, { markers:markersArray } );
        
cluster.fitMapToMarkers();
        
        
map.savePosition(); //  enables the large map control centre button to return the map to initial view
        
        
var html='<div class="htmlControl" style="padding:0px 3px 3px 3px">Enable clustering: <input type="checkbox" checked="checked" onclick="toggleClustering()" /></div>';
        var 
control=new HtmlControl(html);
        
map.addControl(control, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,7)));
    }

}
function 
createTabbedMarker(markerLocation,markerId,name,image_id,desc,cat_id,image_media_files,cat_name,lat,lng) {
        var 
marker=new GMarker(markerLocation, {title:'Marker['+markerId+']'});
        var 
label1 "Das Bild";
        var 
html1 "<div id='infoback_01'>" "<table width='250' height='100' border='0' cellspacing='0' cellpadding='0' bgcolor='#EFEFEF'><tr>" "<td valign='middle'>" '<a href=./details.php?image_id=' image_id '#Google_Maps>' "<img src=./data/thumbnails/" cat_id +"/" image_media_files ">" "</a>" "</td>" "<td>&nbsp;&nbsp;</td>" "<td valign='middle'>""<b> <font color='black'>" name "</b> <br>" "<a href=" "./data/kml/" image_id ".kml>" "Google Earth" "</a>" +"<br>" +  "Kategorie: " "<a href=categories.php?cat_id=" cat_id +">" cat_name "</a></td></tr></table></div>";
        var 
label2 "Infos";
        var 
html2 "<div id='infoback_02'>" "<table width='250' height='100' border='0' cellspacing='0' cellpadding='0' bgcolor='#efefef'><tr>" "<td valign='middle'>" +  desc "</td></tr><tr>" "<td valign='middle'>Latitude:  " lat "<br>Longitude: " lng "</td></tr></table></div>";

        
GEvent.addListener(marker"click", function() {
        
marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]);
});
return 
marker;
}

function 
newMarker(markerLocationmarkerId) {
    var 
marker=new GMarker(markerLocation, {title:'Marker['+markerId+']'});
    
GEvent.addListener(marker'click', function() {
        
marker.openInfoWindowHtml('<p>Marker['+markerId+'] clicked.</p>');

    });
    return 
marker;
}

function 
toggleClustering() {
    
cluster.clusteringEnabled=!cluster.clusteringEnabled;
    
cluster.refresh(true);  //  true required to force a full update of the markers - otherwise the update would occur next time that the map is zoomed or the active markers change
}


Zum Schluss muss nur noch die Datei /google-photo-map.php erstellt werden

<?php
/**************************************************************************
 *                                                                        *
 *    4images - A Web Based Image Gallery Management System               *
 *    ----------------------------------------------------------------    *
 *                                                                        *
 *             File: google-photo-map.php                                 *
 *************************************************************************/
define('ROOT_PATH''./');
include(
ROOT_PATH.'global.php');
require(
ROOT_PATH.'includes/sessions.php');
include(
ROOT_PATH.'includes/page_header.php');

// Select all the rows in the markers table
   
$sql "SELECT COUNT(image_id) AS images
            FROM ("
.IMAGES_TABLE.") WHERE `image_gmap_show` = 1 AND `image_gmap_longitude` != ''";
   
$result $site_db->query_firstrow($sql);
   
$num_images $result['images'];
   
$site_db->free_result();

// Select all the rows in the markers table
$query "SELECT * FROM (".IMAGES_TABLE.") WHERE `image_gmap_show` = 1 AND `image_gmap_longitude` != ''";
$result mysql_query($query);
if (!
$result) {
  die(
'Invalid query: ' mysql_error());
}

$bgcounter 0;
$bgcounter1 = -1;
echo 
"var json=[];";
while (
$row $site_db->fetch_array($result)){
$bgcounter++;
$bgcounter1++;
$sql1 "SELECT cat_name FROM (".CATEGORIES_TABLE.") WHERE cat_id = ".$row['cat_id']."";
$result1 $site_db->query_firstrow($sql1);
echo 
"json[".$bgcounter1."]=";
$daten = array(
  
'id' => $bgcounter,
  
'lat' => $row['image_gmap_latitude'],
  
'lng' => $row['image_gmap_longitude'],
  
'name' => htmlentities($row['image_name']),
  
'desc' => htmlentities($row['image_description']),
  
'cat_name' => htmlentities($result1['cat_name']),
  
'cat_id' => $row['cat_id'],
  
'image_media_files' => $row['image_media_file'],
  
'image_id' => $row['image_id'],
);
echo 
json_encode($daten);
echo 
';';
}
?>


Die anderen Dateien entpackt Ihr aus dem ZIP und schiebt diese auf Euren Server in die entsprechenden Verzeichnisse.

Hinweis:
Was mit bisher nicht möglich war:
- Den Routenplaner aus dem anderen Thread mit einzubauen
- Die Pfadangaben im Standard 4images Format mit ROOT_PATH, da JSON die Pfadangaben mit "\" excluded. Daher sind diese dann leider unbrauchbar.

Für alle die dieses Script verändern. Achtet bitte auf das Ihr die richtige Reihenfolge einhaltet, sonst werden in den Blasen nicht die richtigen Werten an den richtigen Stellen dargestellt..
Anbei die Stellen wo Ihr aufpassen müsst.

        marker
=createTabbedMarker(new GLatLng(json[i].latjson[i].lng), json[i].idjson[i].namejson[i].image_idjson[i].descjson[i].cat_idjson[i].image_media_filesjson[i].cat_name,json[i].latjson[i].lng);


function createTabbedMarker(markerLocation,markerId,name,image_id,desc,cat_id,image_media_files,cat_name,lat,lng) {


Nun werden die Clustermaps dargestellt wie auf der DEMO Seite beschrieben, oder bei mir zu sehen:
http://rinaldos.homeip.net/google-photo-map.html

Ich hoffe das wir diese Version hier noch weiter modifizieren können.

Gruß
Ingo
« Last Edit: July 01, 2009, 08:19:11 PM by rinaldos »

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Google ClusterPhotomap erstellen
« Reply #1 on: July 01, 2009, 08:00:38 PM »
... das sieht sehr gut aus und ist überaus sinnvoll, zumal wenn sich die DB mit GPS-Bildern füllt ...
... doch warum muss der ID-Zähler ein Hintergrundzähler ( $bgcounter ) sein ... ;) ...
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: Google Clustermap erstellen
« Reply #2 on: July 01, 2009, 08:16:04 PM »
hi ingo...
genial! es klappt und es ist auch noch gut zu erweitern...
meine cluster test-map siehst du hier... habe schon ein wenig ergänzt...
du solltest oben noch angeben, dass in der html-datei der google-API-key noch entsprechend eingegeben werden muss, da sonst keine karte zu sehen... auch würde ich die pfade zu den js.-dateien absolut setzen (./js/mapiconmaker.js).
aber geile sache...
da kann man nun schön erweitern und ergänzen...
gruss, bergblume!
 :thumbup: :thumbup:
« Last Edit: July 02, 2009, 11:32:25 AM by bergblume »

rinaldos

  • Guest
Re: Google ClusterPhotomap erstellen
« Reply #3 on: July 01, 2009, 08:18:19 PM »
@mawenzi
Der bgcounter ist für den JSON Wert
  • [1]usw. Damit eben alle Werte eine passende ID haben. Ich wusste nicht wie ich das am besten realisiere :-)

Und ich habe das Script so aufgebaut, das die Werte genau der DEMo Seite entsprechen. Ist auf jedenfall noch verbesserungswürdig ...

@bergblume
Werd ich nachher noch ergänzen.....

Gruß

Ingo

Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: Google ClusterPhotomap erstellen
« Reply #4 on: July 07, 2009, 09:52:14 PM »
hi ingo...

gibt es neuigkeiten von deiner seite?
bei mir läuft die clustermap auf der einen seite von mir prima - auf einer anderen seite wo ich sehr viele modifikationen (google maps V1.2, google photomap, best seo friendly urls, etc) vorgenommen habe, bekomme ich die clustermap leider mit obigen code nicht zum laufen... es wird mir immer eine leere googlemap angezeigt...  :?: was meinst du, woran das liegen kann?

evtl sollte man oben noch den mapiconmaker mit einfügen, so dass auch die grünen kreise mit zahlen angezeigt werden....

gruss, bergblume

rinaldos

  • Guest
Re: Google ClusterPhotomap erstellen
« Reply #5 on: July 07, 2009, 10:02:13 PM »
Hi,
sogesehen läuft alles bestens. Ich bin mir nicht sicher ob ich die Modifikation mit der MapIcon hier hinzufügen soll. Da es ggf beim einfügen des Codes bei dem ein oder anderen zu Problemen kommen kann.
Da doch einige Änderungen an der Datei vorgenommen werden müssen. Die Einbauanleitung auf der entsprechenden Webseite ist nicht so berauschend geschrieben. Ich habe dieses auch nur unter ein wenig probieren hinbekommen. Daher denke ich, das diese Änderungen auch nicht wirklich hierhin gehören, da ich nicht wirklich Support oder so dafür übernehmen kann ....

Du kannst gerne den Link posten, damit andere diese Änderungen durchführen können. Mit der o.a. Einbindung ist auf jedenfall gewährleistet, das jeder die "ClusterPhotomap" mit 4images hinbekommt.

Gib mir doch einmal den Link zu der ANDERE seite wo es nicht läuft.

LG
Ingo

Offline shahid687

  • Pre-Newbie
  • Posts: 1
    • View Profile
Re: Google ClusterPhotomap erstellen
« Reply #6 on: July 08, 2009, 05:28:23 PM »
sogesehen läuft alles bestens. Ich bin mir nicht sicher ob ich die Modifikation mit der MapIcon hier hinzufügen soll. Da es ggf beim einfügen des Codes bei dem ein oder anderen zu Problemen kommen kann.

« Last Edit: July 08, 2009, 05:48:48 PM by kai »

rinaldos

  • Guest
Re: Google ClusterPhotomap erstellen
« Reply #7 on: July 08, 2009, 06:36:41 PM »
sogesehen läuft alles bestens. Ich bin mir nicht sicher ob ich die Modifikation mit der MapIcon hier hinzufügen soll. Da es ggf beim einfügen des Codes bei dem ein oder anderen zu Problemen kommen kann.

Also für den, der es gerne probiert, kann Modifikationen an der Java Datei  (/js/ClusterMarker.js
) durchführen. Hier der link:

http://googlemapsapi.martinpearman.co.uk/forum/viewthread.php?forum_id=5&thread_id=30&pid=129#post_129



Gruss
Ingo

Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: Google ClusterPhotomap erstellen
« Reply #8 on: July 11, 2009, 03:53:37 PM »
hallo ingo...
danke dir für deine hilfsbereitschaft... ich habe das problem mittlerweile lösen können... bei mir im header.html hat diese zeile
Code: [Select]
<body {pm_popup_header} onload="load()" onunload="GUnload()">die fehlfunktion ausgelöst...

by the way... weißt du mittlerweile wie man den standardmarker (der ein einzelnes foto markiert) gegen einen x-beliebigen anderen marker in der clustermap austauschen kann??
gruss, bergblume

rinaldos

  • Guest
Re: Google ClusterPhotomap erstellen
« Reply #9 on: July 11, 2009, 04:02:55 PM »
Hi
Ich denke das geht mit der Datei mapiconmarker.js. Dort sind Definitionen für ICON's. Ziemlich am Ende ist dort ein Verweis auf ein default ICON. Ich denke damit, sofern man es ändert, sollte es gehen....

var icon = new GIcon(G_DEFAULT_ICON);

Gruß


Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: Google ClusterPhotomap erstellen
« Reply #10 on: July 11, 2009, 04:09:41 PM »
mmmh.... klappt leider nicht wenn ich

Code: [Select]
  var icon = new GIcon(G_DEFAULT_ICON);
  icon.image = iconUrl + "&ext=.png";
  icon.iconSize = (addStar) ? new GSize(23, 39) : new GSize(21, 34);
  return icon;

mit

Code: [Select]
var tinyIcon = new GIcon();

tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";

tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";

tinyIcon.iconSize = new GSize(12, 20);

// tinyIcon.shadowSize = new GSize(22, 20);

tinyIcon.iconAnchor = new GPoint(1, 14);

tinyIcon.infoWindowAnchor = new GPoint(1, 14);

Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: [MOD] Google ClusterPhotomap erstellen
« Reply #11 on: February 13, 2010, 05:22:37 PM »
noch mal ganz kurz die frage an euch experten, was ich hier unten in meiner*.js datei ändern muss, um in der clustermap meinen eigenen marker (pfad: webseite.de/marker.jpg) angezeigt zu bekommen??

Code: [Select]
var MapIconMaker = {};

/**
 * Creates an icon based on the specified options in the
 *   {@link MarkerIconOptions} argument.
 *   Supported options are: width, height, primaryColor,
 *   strokeColor, and cornerColor.
 * @param {MarkerIconOptions} [opts]
 * @return {GIcon}
 */
MapIconMaker.createMarkerIcon = function (opts) {
  var width = opts.width || 32;
  var height = opts.height || 32;
  var primaryColor = opts.primaryColor || "#ff0000";
  var strokeColor = opts.strokeColor || "#000000";
  var cornerColor = opts.cornerColor || "#ffffff";
  
  var baseUrl = "http://chart.apis.google.com/chart?cht=mm";
  var iconUrl = baseUrl + "&chs=" + width + "x" + height +
      "&chco=" + cornerColor.replace("#", "") + "," +
      primaryColor.replace("#", "") + "," +
      strokeColor.replace("#", "") + "&ext=.png";
  var icon = new GIcon();
  icon.image = "http://www.via-ferrata.de/forum/templates/prosilverse/images/site_logo.gif";
  icon.iconSize = new GSize(width, height);
  icon.shadowSize = new GSize(Math.floor(width * 1.6), height);
  icon.iconAnchor = new GPoint(width / 2, height);
  icon.infoWindowAnchor = new GPoint(width / 2, Math.floor(height / 12));
  icon.printImage = iconUrl + "&chof=gif";
  icon.mozPrintImage = iconUrl + "&chf=bg,s,ECECD8" + "&chof=gif";
  iconUrl = baseUrl + "&chs=" + width + "x" + height +
      "&chco=" + cornerColor.replace("#", "") + "," +
      primaryColor.replace("#", "") + "," +
      strokeColor.replace("#", "");
  icon.transparent = iconUrl + "&chf=a,s,ffffff11&ext=.png";

  icon.imageMap = [
    width / 2, height,
    (7 / 16) * width, (5 / 8) * height,
    (5 / 16) * width, (7 / 16) * height,
    (7 / 32) * width, (5 / 16) * height,
    (5 / 16) * width, (1 / 8) * height,
    (1 / 2) * width, 0,
    (11 / 16) * width, (1 / 8) * height,
    (25 / 32) * width, (5 / 16) * height,
    (11 / 16) * width, (7 / 16) * height,
    (9 / 16) * width, (5 / 8) * height
  ];
  for (var i = 0; i < icon.imageMap.length; i++) {
    icon.imageMap[i] = parseInt(icon.imageMap[i]);
  }

  return icon;
};


/**
 * Creates a flat icon based on the specified options in the
 *     {@link MarkerIconOptions} argument.
 *     Supported options are: width, height, primaryColor,
 *     shadowColor, label, labelColor, labelSize, and shape..
 * @param {MarkerIconOptions} [opts]
 * @return {GIcon}
 */
MapIconMaker.createFlatIcon = function (opts) {
  var width = opts.width || 32;
  var height = opts.height || 32;
  var primaryColor = opts.primaryColor || "#ff0000";
  var shadowColor = opts.shadowColor || "#000000";
  var label = MapIconMaker.escapeUserText_(opts.label) || "";
  var labelColor = opts.labelColor || "#000000";
  var labelSize = opts.labelSize || 0;
  var shape = opts.shape ||  "circle";
  var shapeCode = (shape === "circle") ? "it" : "itr";

  var baseUrl = "http://chart.apis.google.com/chart?cht=" + shapeCode;
  var iconUrl = baseUrl + "&chs=" + width + "x" + height +
      "&chco=" + primaryColor.replace("#", "") + "," +
      shadowColor.replace("#", "") + "ff,ffffff01" +
      "&chl=" + label + "&chx=" + labelColor.replace("#", "") +
      "," + labelSize;
  var icon = new GIcon();
  icon.image = iconUrl + "&chf=bg,s,00000000" + "&ext=.png";
  icon.iconSize = new GSize(width, height);
  icon.shadowSize = new GSize(0, 0);
  icon.iconAnchor = new GPoint(width / 2, height / 2);
  icon.infoWindowAnchor = new GPoint(width / 2, height / 2);
  icon.printImage = iconUrl + "&chof=gif";
  icon.mozPrintImage = iconUrl + "&chf=bg,s,ECECD8" + "&chof=gif";
  icon.transparent = iconUrl + "&chf=a,s,ffffff01&ext=.png";
  icon.imageMap = [];
  if (shapeCode === "itr") {
    icon.imageMap = [0, 0, width, 0, width, height, 0, height];
  } else {
    var polyNumSides = 8;
    var polySideLength = 360 / polyNumSides;
    var polyRadius = Math.min(width, height) / 2;
    for (var a = 0; a < (polyNumSides + 1); a++) {
      var aRad = polySideLength * a * (Math.PI / 180);
      var pixelX = polyRadius + polyRadius * Math.cos(aRad);
      var pixelY = polyRadius + polyRadius * Math.sin(aRad);
      icon.imageMap.push(parseInt(pixelX), parseInt(pixelY));
    }
  }

  return icon;
};


/**
 * Creates a labeled marker icon based on the specified options in the
 *     {@link MarkerIconOptions} argument.
 *     Supported options are: primaryColor, strokeColor,
 *     starPrimaryColor, starStrokeColor, label, labelColor, and addStar.
 * @param {MarkerIconOptions} [opts]
 * @return {GIcon}
 */
MapIconMaker.createLabeledMarkerIcon = function (opts) {
  var primaryColor = opts.primaryColor || "#DA7187";
  var strokeColor = opts.strokeColor || "#000000";
  var starPrimaryColor = opts.starPrimaryColor || "#FFFF00";
  var starStrokeColor = opts.starStrokeColor || "#0000FF";
  var label = MapIconMaker.escapeUserText_(opts.label) || "";
  var labelColor = opts.labelColor || "#000000";
  var addStar = opts.addStar || false;
  
  var pinProgram = (addStar) ? "pin_star" : "pin";
  var baseUrl = "http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=";
  var iconUrl = baseUrl + pinProgram + "'i\\" + "'[" + label +
      "'-2'f\\"  + "hv'a\\]" + "h\\]o\\" +
      primaryColor.replace("#", "")  + "'fC\\" +
      labelColor.replace("#", "")  + "'tC\\" +
      strokeColor.replace("#", "")  + "'eC\\";
  if (addStar) {
    iconUrl += starPrimaryColor.replace("#", "") + "'1C\\" +
        starStrokeColor.replace("#", "") + "'0C\\";
  }
  iconUrl += "Lauto'f\\";

  var icon = new GIcon();
  icon.image = "http://www.via-ferrata.de/forum/templates/prosilverse/images/site_logo.gif";
  icon.iconSize = (addStar) ? new GSize(23, 39) : new GSize(21, 34);
  return icon;
};


/**
 * Utility function for doing special chart API escaping first,
 *  and then typical URL escaping. Must be applied to user-supplied text.
 * @private
 */
MapIconMaker.escapeUserText_ = function (text) {
  if (text === undefined) {
    return null;
  }
  text = text.replace(/@/, "@@");
  text = text.replace(/\\/, "@\\");
  text = text.replace(/'/, "@'");
  text = text.replace(/\[/, "@[");
  text = text.replace(/\]/, "@]");
  return encodeURIComponent(text);
};


danke!

edit :ach ja noch was... wo kann ich definieren, dass standardmäßig der OSM-Layer aufgerufen wird??
« Last Edit: February 13, 2010, 06:02:44 PM by bergblume »

Offline kubiczek

  • Full Member
  • ***
  • Posts: 211
    • View Profile
    • Gross Peterwitz
Re: [MOD] Google ClusterPhotomap erstellen
« Reply #12 on: October 04, 2010, 04:13:55 PM »
Hallo,

wie hast du es gelöst mit dem Routenplaner?

http://grosspeterwitz.org/friedhof/4images/index.php?template=google-photo-map-claster

in der normalen Photomap habe ich es so gelöst..
http://www.4homepages.de/forum/index.php?topic=21306.msg137957;topicseen#msg137957

aber bei den Clustern komme ich nicht weiter.

kannst Du mir da mal helfen?


Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: [MOD] Google ClusterPhotomap erstellen
« Reply #13 on: December 02, 2010, 01:29:23 PM »
Hallo Ingo!

kurze fragen an dich - da ich es slebst nicht gelöst bekomme...
wie kann ich den MOD different Icons mit der Clustermap kombinieren?

wie muss die gm.js und die google-photo-map.php in diesem fall ergänzt werden?

Danke dir,
bergblume