4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
December 11, 2016, 10:50:46 AM

Login with username, password and session length
Search:     Advanced search
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Releases & Support) (Moderators: mawenzi, Rembrandt)
| | |-+  [MOD] Google ClusterPhotomap erstellen
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Print
Current Topic Rating: *****
Author Topic: [MOD] Google ClusterPhotomap erstellen  (Read 11595 times)
rinaldos
Guest
« 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 ....

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?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.
1
        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);
1
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

* js.zip (4.55 KB - downloaded 29 times.)
« Last Edit: July 01, 2009, 08:19:11 PM by rinaldos » Logged
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« 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 ... Wink ...
Logged

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) ...
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« 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!
 Good Good
« Last Edit: July 02, 2009, 11:32:25 AM by bergblume » Logged
rinaldos
Guest
« 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 Smile
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
Logged
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« 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...  Question 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
Logged
rinaldos
Guest
« 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
Logged
shahid687(banned)
Pre-Newbie

Offline Offline

Posts: 1

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« 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 » Logged
rinaldos
Guest
« 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
Logged
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« 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
1
<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
Logged
rinaldos
Guest
« 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ß

Logged
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« Reply #10 on: July 11, 2009, 04:09:41 PM »

mmmh.... klappt leider nicht wenn ich

1
2
3
4
  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

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
Logged
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« 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??

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
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 » Logged
kubiczek
Full Member
***
Offline Offline

Posts: 208

Thank You
-Given: 31
-Receive: 10


View Profile WWW
« 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?

Logged
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« 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
Logged
Pages: [1] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.375 seconds with 20 queries.
Post your comments here