[Need Help] different icons / markers in google-photomap / googlemaps

[bergblume]

hi together,

I use [mod] google photomap and I wonder how I can achieve the result, that it will be displayed different markers in googlemap - depending on category.
e.g. if I have a category "skilifts" I want to have used an icon like this in google maps and if I have a category called "Restaurant" I want to use this icon

example like here:


can anyone help me please to realize this feature??
many thanks in advance!!
bergblume

[bergblume]

does anyone have an idea or a coding how to do this?

[bergblume]

hello together!

meanwhile I could solve the problem - thanks to the help of alekina - and here is the solution, if s.o. should be interested in having markers in dfifferent colors depending on the category...

in reference to this mod and files => Link

in the file google-photo-map.php i added this line to save and parse cat_id
search for:

Code: [Select]

echo 'cat="' . "".ROOT_PATH."categories.php?cat_id=" . $row['cat_id'] . '" ';add after:

Code: [Select]

echo 'catid="' . parseToXML($row['cat_id']) . '" ';
and the file gm.js you have to put the following code in:

search for

Code: [Select]

var cat = markers[i].getAttribute("cat");add after:

Code: [Select]

var catid = markers[i].getAttribute("catid");
search for

Code: [Select]

parseFloat(markers[i].getAttribute("lng")));add after:

Code: [Select]

var marker = createMarker(point, name, address, type, thumb, kml, cat, desc, catid);
delete at the beginning:

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);
// Set up our GMarkerOptions object literal
markerOptions = { icon:tinyIcon };
search for

Code: [Select]

       var satmarker = new GMarker(satmarker);

        });

      }

    }
add after the markers you want to use, e.g. (this is the whole code till the end of your file--- delete everything that is below in your existing *.js-file):

Code: [Select]

   
function createMarker(point, name, address, type, thumb, kml, cat, desc, catid) {

var iconRed = new GIcon();
iconRed.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
iconRed.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
iconRed.iconSize = new GSize(12, 20);
// iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(11, 11);
iconRed.infoWindowAnchor = new GPoint(11, 11);


var iconSkitour = new GIcon();
iconSkitour.image = "http://google-maps-icons.googlecode.com/files/crosscountryskiing.png";
iconSkitour.iconSize = new GSize(32, 37);
// iconSkitour.shadowSize = new GSize(22, 20);
iconSkitour.iconAnchor = new GPoint(11, 11);
iconSkitour.infoWindowAnchor = new GPoint(11, 11);

var iconBergtour = new GIcon();
iconBergtour.image = "http://google-maps-icons.googlecode.com/files/hiking.png";
iconBergtour.iconSize = new GSize(32, 37);
// iconBergtour.shadowSize = new GSize(22, 20);
iconBergtour.iconAnchor = new GPoint(11, 11);
iconBergtour.infoWindowAnchor = new GPoint(11, 11);

var iconSchneeschuhe = new GIcon();
iconSchneeschuhe.image = "http://google-maps-icons.googlecode.com/files/snowshoeing.png";
iconSchneeschuhe.iconSize = new GSize(32, 37);
// iconSchneeschuhe.shadowSize = new GSize(22, 20);
iconSchneeschuhe.iconAnchor = new GPoint(11, 11);
iconSchneeschuhe.infoWindowAnchor = new GPoint(11, 11);

var iconMountainbike = new GIcon();
iconMountainbike.image = "http://google-maps-icons.googlecode.com/files/mountainbike.png";
iconMountainbike.iconSize = new GSize(32, 37);
// iconMountainbike.shadowSize = new GSize(22, 20);
iconMountainbike.iconAnchor = new GPoint(11, 11);
iconMountainbike.infoWindowAnchor = new GPoint(11, 11);


  var marker = new GMarker(point, iconRed);
 
  if (catid == 1) {
    var marker = new GMarker(point, iconSkitour);
  }
    if (catid == 2) {
    var marker = new GMarker(point, iconBergtour);
  }
    if (catid == 3) {
    var marker = new GMarker(point, iconSchneeschuhe);
  }
    if (catid == 4) {
    var marker = new GMarker(point, iconMountainbike);
  }



      var html = "<div id='infoback_01'>" + "<table width='200' border='0' cellspacing='0' cellpadding='0' bgcolor='#EFEFEF'><tr>" + "<td valign='top'>" + "<a href=" + type +"#Google_Maps>" + "<img src=" + thumb + ">" + "</a>" + "</td>" + "<td>&nbsp;&nbsp;</td>" + "<td valign='top'>"+ "<b> <font color='black'>" + "<a href=" + type +"#Google_Maps>" + name + "</a>" + "</b> <br>" + "<a href=" + kml +">" + "Google Earth" + "</a>" +"<br>" +  "<a href=" + cat +">" + "zur Kategorie" + "</a></td></tr></table></div>";

      GEvent.addListener(marker, 'click', function() {

        marker.openInfoWindowHtml(html);



  });

      return marker;

    }

    //]]>

catid == 1 , catid == 2 , catid == 3 , catid == 4 you have to adapt to YOUR CATEGORIES in order to get the markers shown....



by the way... a lot of good markers you can find here => http://code.google.com/p/google-maps-icons/wiki/MiscellaneousIcons

that´s it!
cheers bergblume!

[kubiczek]

hi bergblume,


leider finde ich diesen abschnitt nicht in meiner gm.js



       var satmarker = new GMarker(satmarker);

        });

      }

    }

nur   folgendes


               var marker = createMarker(point, name, address, type, thumb, kml, cat, desc, catid);
       
            map.addOverlay(marker);
          }
        });
      }
    }




aber wenn ich es danach einfüge,  bekomme ich keine marker angezeigt


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

habe dir meine gm.js     mal per PM geschickt

[bergblume]

halllo

Code: [Select]

 var marker = new GMarker(point, iconRed);
 
 if (catid == 11 {
   var marker = new GMarker(point, iconWhite);
 }
   if (catid == 14) {
   var marker = new GMarker(point, iconBlue);
 }
ich habe mir gerade mal deine gm.js angeschaut... die kategorien 11 und 14 haben keine GPs-daten hinterlegt, weswegen wohl die leere karte angezeigt wird... wähle mal anstelle von catid == 11 und  catid == 14 eine kategorie von dir aus, die GPs-daten enthält...

[kubiczek]

hi

auch wenn ich Kategorien mit GPS Daten nehme,  bekomme ich keine Besserung,


könntest du mal über die drei Dateien kurz schauen?

Google Api ist der Richtige.  habe eben noch mal kontroliert.

[bergblume]

hi!

ich glaube ich habe den fehler bei dir gefunden...

füge in deiner datei google-photo-map.html mal hinter

Code: [Select]

<script src="http://maps.google.com/maps?file=api&v=2&key=XYZ........................."
 type="text/javascript"></script>

folgenden code ein

Code: [Select]

   <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>  



gruss, bergblume

[kubiczek]

Das hat auch nicht hingehauen,

 

[bergblume]

also so schaut mein funktionierender teil aus...

vergleiche bitte nochmal genau...
wo ist dein body onload??

setzt die zeile  <body onload="load()" onunload="GUnload()"> mal hinter den code, den ich dir in meinem letzten post geschrieben hatte..

Code: [Select]

<script src="http://maps.google.com/maps?file=api&v=2&key=DEINKEY"
 type="text/javascript"></script>

    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>   
 
  <script type="text/javascript" src="js/gm-tirol.js"></script>
 
 <body onload="load()" onunload="GUnload()">

 
<table width="700px" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <div id="map" style="width: 700px; height: 700px"></div>
    </table>
   </td>
  </tr>

 </table>


Edit: schick mir mal via PN deine email-adresse dann schicke ich dir mal meine dateien zum test zu...

[manica]

Ich möchte 2 Karten anzeigen. Einmal wo nur das Bild markiert ist und dann eine Übersichtskarte auf der angrenzende angezeigt werden.
Oder aber die Übersichtskarte auf der Kategorieübersicht. Hat da einer eine Idee oder eine fertige Lösung?

[manica]

Hallo, habe die Änderungen auch gemacht und bekomme auch keine Marker mehr. Die Kats. haben Marker.

Ich glaube ich habe die Fehler gefunden die auch bei kubiczek für fehlende Marker gesorgt haben.

So sollte es funktionieren (jedenfalls bei mir)

Code: [Select]

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.setCenter(new GLatLng(48.183028, 8.627701), 11);
        var Tsize = new GSize(200, 256);
        map.addControl(new GOverviewMapControl(Tsize));
        map.enableDoubleClickZoom();
        map.enableContinuousZoom();

        GDownloadUrl("/google-photo-map.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var thumb = markers[i].getAttribute("thumb");
            var kml = markers[i].getAttribute("kml");
            var desc = markers[i].getAttribute("desc");
            var cat = markers[i].getAttribute("cat");
var catid = markers[i].getAttribute("catid");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, thumb, kml, cat, desc, catid);
            //var marker = createMarker(point, name, address, type, thumb, kml, cat, desc);
            map.addOverlay(marker);
          }
        });
      }
    }
function createMarker(point, name, address, type, thumb, kml, cat, desc, catid) {
var iconBlue = new GIcon();
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);
    
        var iconWhite = new GIcon();
    iconWhite.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconWhite.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconWhite.iconSize = new GSize(12, 20);
    iconWhite.shadowSize = new GSize(22, 20);
    iconWhite.iconAnchor = new GPoint(6, 20);
    iconWhite.infoWindowAnchor = new GPoint(5, 1);

var marker = new GMarker(point, iconRed);
 
 if (catid == 1) {
   var marker = new GMarker(point, iconWhite);
 }
   if (catid == 2) {
   var marker = new GMarker(point, iconBlue);
 }

    
      //var marker = new GMarker(point, tinyIcon);
      var html = "<br/>" + "<table><tr>" + "<td width='100'>" + "<a href=" + type +">" + "<img src=" + thumb + ">" + "</a>" + "</td>" + "<td valign='top'>"+ "<b> <font color='black'>" + name + "</b> <br>" + "<a href=" + kml +">" + "Google Earth" + "</a>" +"<br>" +  "<a href=" + cat +">" + "zur Kategorie" + "</a></td></tr></table><table><tr><td><font color='#316F3C'>" + desc +"</td></tr></table>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>

Code: [Select]

//var marker = createMarker(point, name, address, type, thumb, kml, cat, desc);
            map.addOverlay(marker); war 2x vorhanden und die Funktion

Code: [Select]

function createMarker(point, name, address, type, thumb, kml, cat, desc, catid) { war unten vor dem htmlcode und mußte nach oben und um catid erweitert werden


Jetzt kommen zwar Marker aber nur Rote, f....

[5jvtr]

This is exactly what I have been trying to do, thank you for the information!

[bergblume]

as I newly tried out different markers in my google-maps within 4images I herewith have corrected the code in this tutorial
If you try http://www.4homepages.de/forum/index.php?topic=24759.msg136175#msg136175 different markers should now work properly!

cheers, bergblume