Autor Thema: Nochmal das Thema Google Maps  (Gelesen 7676 mal)

Offline Bernie

  • Globaler Moderator
  • Power Mitglied
  • *****
  • Beiträge: 111
  • Danksagungen: 36
Re: Nochmal das Thema Google Maps
« Antwort #10 am: 09.12.2013 um 19:12:28 »
Hallo Claus,
 
Prima hat bei mir auch geklappt.
 
Irgendwie hatte ich dieses Problem bei meinen Webkatalogen noch gar nicht bemerkt.

Noch ne kleine Zusatzinfo die Datei befindet sich in dem Ordner components, es soll ja nicht jeder ewig danach suchen müssen  ;) .

Offline Only

  • Arfooo Directory Forum Team
  • Administrator
  • Power Mitglied
  • *****
  • Beiträge: 509
  • Danksagungen: 104
  • Arfooo Directory Script
Re: Nochmal das Thema Google Maps
« Antwort #11 am: 09.12.2013 um 19:12:44 »
Dann machen wir es doch richtig:

Der Pfad lautet: components/GoogleMap.php :)

Die aktuelle Version findet Ihr auch unter Downloads bei uns (Arfooo Directory diverses/GoogleMap)
« Letzte Änderung: 09.12.2013 um 19:12:28 von Only »
MfG
Ihr Arfooo Forum Team
Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden

Offline Bernie

  • Globaler Moderator
  • Power Mitglied
  • *****
  • Beiträge: 111
  • Danksagungen: 36
Re: Nochmal das Thema Google Maps
« Antwort #12 am: 09.12.2013 um 20:12:53 »
Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden
Dann machen wir es doch richtig:

Der Pfad lautet: components/GoogleMap.php :)

Gut gemacht, genau dass meinte ich auch  ;D .

Offline xenios

  • Neuling
  • *
  • Beiträge: 12
  • Danksagungen: 0
Re: Nochmal das Thema Google Maps wegen Category ID
« Antwort #13 am: 27.12.2013 um 15:12:49 »
besteht die Möglichkeit die categoryId zu übergeben? Dann wäre es machbar ein KategorieIocon anzu zeigen. Ein default Icon habe ich schon eingebunden.

suche : default.png

Code: Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden
<?php
/**
 * Arfooo
 *
 * @package    Arfooo
 * @copyright  Copyright (c) Arfooo Annuaire (fr) and Arfooo Directory (en)
 *             by Guillaume Hocine (c) 2007 - 2010
 *             http://www.arfooo.com/ (fr) and http://www.arfooo.net/ (en)
 * @author     Guillaume Hocine & Adrian Galewski
 * @license    http://creativecommons.org/licenses/by/2.0/fr/ Creative Commons
 */


class GoogleMap
{
    const 
API_URL http://maps.google.com/maps/api/js;

    
const GEO_URL http://maps.googleapis.com/maps/api/geocode;
    
private $_points = array();
    private 
$_zoomLevel;

    public function 
setZoomLevel($zoomLevel)
    {
        
$this->_zoomLevel $zoomLevel;
    }

    public function 
addGeoPoint($lat$lng$description = )
    {
        
$point = array(
            
lat         => $lat,
            
lng         => $lng,
            
address     => ,
            
description => $description
        
);

        
array_push($this->_points$point);
    }

    public function 
addAddress($address$description = )
    {
        
$url self::GEO_URL . ?&output=json&q= . urlencode($address);

        if (@
ini_get(allow_url_fopen)) {
            
$buff = @file_get_contents($url);
        } else {
            
$httpClient = new HttpClient();
            
$buff $httpClient->getSiteContent($urlfalse);
        }

        
$response json_decode(utf8_encode($buff), true);

        if (empty(
$response[Status][code])) {
            throw new 
Google_Map_ServiceException(Invalid status code);
        }

        if (empty(
$response[Placemark][0][Point][coordinates])) {
            throw new 
Google_Map_AddressNotFoundException(Point can NOT be found);
        }

        
$coords $response[Placemark][0][Point][coordinates];

        
$point = array(
            
lat         => $coords[1],
            
lng         => $coords[0],
            
address     => $address,
            
description => $description
        
);

        
array_push($this->_points$point);
        return array(
            
lat => $coords[1],
            
lng => $coords[0]
        );
    }

    public function 
getScriptCode()
    {
        return 
"\n<script src=\"" self::API_URL"?sensor=false\" type=\"text/javascript\"></script>\n";
    }

    public function 
getMapCode()
    {
        
$html "<script type=\"text/javascript\">\n
        function showGoogleMap()
        {
        //<![CDATA[
        var myOptions = {
            zoom: " 
$this->_zoomLevel ",
            center: new google.maps.LatLng(" 
$this->_points[0][lat] . ", " $this->_points[0][lng] . "),
            mapTypeId: google.maps.MapTypeId.ROADMAP

        };
        var map = new google.maps.Map(document.getElementById(\"map\"), myOptions);
        "
;

        
$i 0;

        foreach (
$this->_points as $point) {
            
$i++;

            
$infoText = ($point[description]) ? $point[description] : $point[address] ;

            
$html .= "
            var point
{$i} = new google.maps.LatLng({$point[lat]}{$point[lng]});
            var marker
{$i} = new google.maps.Marker({position: point{$i}, title: \"{$infoText}\" });
            marker
{$i}.setMap(map);
            "
;
        }

        
$html .= "//]]>
        }
        \$(window).load(showGoogleMap);
        </script>
        "
;

        return 
$html;
    }

    public function 
getUserSideMapCode($address$description "")
    {
        
$point = array("address" => $address"description" => $description);
        
$infoText = ($point[description]) ? $point[description] : $point[address];

        
$this->_points = array($point);

        
$html "<script type=\"text/javascript\">\n
        function showGoogleMap()
        {
            var myOptions = {
                zoom: " 
$this->_zoomLevel ",
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById(\"map\"), myOptions);
            var geocoder = new google.maps.Geocoder();
        "
;

        
$i 0;

        foreach (
$this->_points as $point) {
            
$i++;

            
$address addslashes($point[address]);
            
$html .= "
            geocoder.geocode(
                {
                    address: \"
{$address}\"
                },
                function(results, status)
                {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker(
                            {
                                map: map,
                                position: results[0].geometry.location,
                                title: \"
{$infoText}\",
icon: http://diehundeprofis.net/google/default.png
                            }
                        );

                    }
                }
            );
            "
;
        }

        
$html .= "
        }
        \$(window).load(showGoogleMap);
        </script>
        "
;

        return 
$html;
    }

}

class 
Google_Map_ServiceException extends Exception{}
class 
Google_Map_AddressNotFoundException extends Exception{}

« Letzte Änderung: 27.12.2013 um 17:12:31 von xenios »

Offline Claus

  • Mitglied
  • ***
  • Beiträge: 56
  • Danksagungen: 5
Re: Nochmal das Thema Google Maps
« Antwort #14 am: 29.12.2013 um 17:12:54 »
Schau Dir mal dieses Script an, ich denke man müsste dieses "nur" anpassen.
Die placeholder für die Kategorien müssten variabel werden und...und...
Ich bekomme es aber bis jetzt leider nicht hin :-[

Code: Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden
var map, infoBubble, styledcontent, oms;
var content = [];
var geocoder = new google.maps.Geocoder();
var default_zoom = 9;
var search_zoom = 14;
var global_filter = ;
var search_placeholder = Straße, Ort;

$(document).ready(function() {
    if ($(#map_canvas).length != 0) {

        var mapCenter = new google.maps.LatLng(50.22120, 8.63525); // Default
        map = new google.maps.Map(document.getElementById(map_canvas), {
          zoom: default_zoom,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false
        });
oms = new OverlappingMarkerSpiderfier(map, {markersWontMove: true, markersWontHide: true, keepSpiderfied: true});

// ------------------------------------------
// function to show all relevant markers. filtered by filter-parameter if set :-)
runQuery = function(elements, filter) {

// Is filter set?
var filter = (typeof(filter) != undefined) ? filter : ;

// create new filter
var current_element = elements + filter;

// first of all, clear all markers already there:
deleteOverlays();

// loop through all given elements:
$(current_element).each(function(index){

// are coordinates set?
var current_koordinaten_xy = ($(this).children(.koordinaten).text() != ) ? $(this).children(.koordinaten).text() : ;
var current_koordinaten = ;

// put together information for the bubble
var gruppe = new Array();
gruppe[foo] = bar;
content[index] = gruppe; // neue gruppe zum array aller gruppen hinzufügen

// if there are coordinates: split them in x/y, create google position and add marker
if(current_koordinaten_xy != ){
current_koordinaten_xy = current_koordinaten_xy.split(,);
current_koordinaten = new google.maps.LatLng(current_koordinaten_xy[0], current_koordinaten_xy[1]);

addMarker(current_koordinaten, content, index, $(this).children(.fachgruppe).text()); // do everything
}

});
}


// ------------------------------------------
// Info Bubble Default Settings:
infoBubble = new InfoBubble({
map: map,
maxWidth: 290,
maxHeight: 320,
shadowStyle: 0,
padding: 0,
backgroundColor: #fff,
borderRadius: 5,
arrowSize: 20,
borderWidth: 0,
arrowPosition: 20,
backgroundClassName: ejw-gruppe-infowindow,
arrowStyle: 2,
hideCloseButton: false
});


// ------------------------------------------
// for starters: show all
runQuery(#adressenliste li);

// ------------------------------------------
// now filter by filters:
$(#filters a).click(function(){
var current_filter = $(this).attr(data-option-value);
if(current_filter != 0) {
global_filter = . + current_filter; // put together new global filter
}else{
global_filter = ;
}

// toggle .selected-class:
$(.selected).removeClass(selected);
$(this).toggleClass(selected);

// add new markers:
runQuery(#adressenliste li, global_filter);

// if search box is not empty, add address marker as well:
if( $(#finder-adresse).val() !=  && $(#finder-adresse).val() != search_placeholder){
codeAddress( $(#finder-adresse).val(), false);
}

// prevent default action from happening (link href):
return false;
});


// ------------------------------------------
// find addresses by search and center map to this position:
$(#finder-submit).click(function(){

// clear markers and start over again:
runQuery(#adressenliste li, global_filter);

// geocode given address and add marker:
codeAddress( $(#finder-adresse).val() );

// zoom in
map.setZoom(search_zoom);

});

// empty search box on focus if the value is equal to the placeholder text:
$(#finder-adresse).val(search_placeholder);
$(#finder-adresse).focus(function(){
if ($(this).val() == search_placeholder) {
$(this).val();
}
});
$(#finder-adresse).blur(function(){
if ($(this).val() == ) {
$(this).val(search_placeholder);
}
});

}


// ------------------------------------------
// only add infobubble to the marker when its clicked:
oms.addListener(click, function(marker) {
infoBubble.setContent(marker.content);
infoBubble.open(map, marker);
});

});

Ich nutze dabei jQuery, weil die Daten für die Marker (z.B. die Koordinaten) erst bei Aufruf der Website ausgelesen, also generiert, werden. Das ist sicherlich nicht sehr performant, kann aber auch nützlich sein, wenn man zum Beispiel unter der Karte eine Liste der gefilterten Einträge anzeigen möchte.

Die folgende Funktion fügt der Map einen Marker hinzu. Ihr wird die Position (als Google Map Koordinaten) sowie einige weitere Parameter speziell für das EJW-Projekt mitgegeben:

function addMarker(location, content, index, fachgruppe, openbubble) {

// Is openbubble set?
var openbubble = (typeof(openbubble) != undefined) ? openbubble : true;

// check for marker images:
switch(fachgruppe) {
case "HP":
markerImg = new google.maps.MarkerImage(***.png);
break;
case "HMP":
markerImg = new google.maps.MarkerImage(***.png);
break;
case "Standort":
markerImg = new google.maps.MarkerImage(***.png);
break;
default:
markerImg = new google.maps.MarkerImage(***.png);
break;
}

// marker content
if(fachgruppe == Standort) {
styledcontent = <div>Deine Standorteingabe.</div>;
} else {
styledcontent = "<div>...</div>";
}

var marker = new google.maps.Marker({
position: location,
map: map,
icon: markerImg,
content: styledcontent,
animation: google.maps.Animation.DROP
});

// add to marker array
oms.addMarker(marker);

// if is standort, show bubble
if(fachgruppe == Standort && openbubble) {
infoBubble.setContent(marker.content);
infoBubble.open(map, marker);
}

}

Diese Funktion löscht alle Marker von der Map:

// Deletes all markers in the array by removing references to them
function deleteOverlays() {

var markers = oms.getMarkers();

if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
markers.length = 0;
}
 
oms.clearMarkers();

}



Quelle: Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden


Markergenerator: Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden
Marker Bild ändern Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden

« Letzte Änderung: 29.12.2013 um 17:12:11 von Claus »

Offline Claus

  • Mitglied
  • ***
  • Beiträge: 56
  • Danksagungen: 5
Re: Nochmal das Thema Google Maps
« Antwort #15 am: 22.03.2014 um 09:03:59 »
Mir ist aufgefallen das nicht alle Links in die Map eingetragen werden obwohl die Adresse vollständig eingetragen ist und in Afrooo richtig in der Map angezeigt wird.


Offline Only

  • Arfooo Directory Forum Team
  • Administrator
  • Power Mitglied
  • *****
  • Beiträge: 509
  • Danksagungen: 104
  • Arfooo Directory Script
Re: Nochmal das Thema Google Maps
« Antwort #16 am: 23.03.2014 um 12:03:31 »
Zeig mal bitte eine Beispiel wo es nicht funktioniert.
MfG
Ihr Arfooo Forum Team
Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden

Offline Claus

  • Mitglied
  • ***
  • Beiträge: 56
  • Danksagungen: 5
Re: Nochmal das Thema Google Maps
« Antwort #17 am: 26.03.2014 um 23:03:21 »
Schau mal hier Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden
Da wird der Standort in der Karte von Google Maps angezeigt.

Jetzt schau mal auf die Karte Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden hier müsste der Link, links von Augsburg erscheinen, fehlt aber.
Der Eintrag wird nicht aus der SQL Datenbank ausgelesen, aber warum?

Offline Only

  • Arfooo Directory Forum Team
  • Administrator
  • Power Mitglied
  • *****
  • Beiträge: 509
  • Danksagungen: 104
  • Arfooo Directory Script
Re: Nochmal das Thema Google Maps
« Antwort #18 am: 27.03.2014 um 09:03:45 »
Leg mal den Eintrag bitte manuell an (alten löschen und im Admin neu anlegen).
Hast Du die DB mal optimiert aus Arfooo heraus?
MfG
Ihr Arfooo Forum Team
Nichtregistrierte User können den Link und Bilder nicht sehen. Registrieren oder Anmelden

Offline Claus

  • Mitglied
  • ***
  • Beiträge: 56
  • Danksagungen: 5
Re: Nochmal das Thema Google Maps
« Antwort #19 am: 11.07.2014 um 15:07:16 »
Habe gerade festgestellt das Google Maps die Marker auf 200 pro Seite automatisch begrenzt. Ich habe schon über 500...
Es gibt eine Möglichkeit ein KML File zu erzeugen und händisch die Map zu erzeugen.
Ich hätte gerne aber das die Map die Daten automatisch, so wie jetzt, aus der SQL Datenbank holt.
Hat da jemand eine Idee?