kostenloser Webspace werbefrei: lima-city


google map mit neuem API wird nicht mehr angezeigt

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    cdot

    Kostenloser Webspace von cdot

    cdot hat kostenlosen Webspace.

    Salvete omnes!

    Mein derzeitiges HP-Projekt bringt wieder einmal ein Problem mir sich:
    Ich habe nach einer Vorlage auf meiner Seite eine google-map eingebunden, wobei darunter die Koordinaten von dem Punkt, den man betrachtet, angezeigt werden

    Der Code ist folgender:
    <script src="http://www.google.com/jsapi?key=ABQIAAAAyYu8a7AdbfUctK3zwwu_2hQcSOGmiixENvtTH313vIgQ4X1LYBSDZW5glZCCklLKePmjvJ8YN_LpPA" type="text/javascript">
    </script>
    <script type="text/javascript">
    google.load('maps', '2'); // Load version 2 of the Maps API
    
    function timezoneLoaded(obj) {
        var timezone = obj.timezoneId;
        if (!timezone) {
            return;
        }
        document.getElementById('timezone').innerHTML = timezone;
        document.getElementById('timezonep').style.display = 'block';
        // Find out what time it is there
        var s = document.createElement('script');
        s.src = "http://json-time.appspot.com/time.json?callback=timeLoaded&tz=" + timezone;
        s.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(s);
    }
    
    function timeLoaded(obj) {
        if (obj.datetime) {
            document.getElementById('datetime').innerHTML = obj.datetime;
            document.getElementById('datetimep').style.display = 'block';        
        }
    }
    
    function updateLatLonFields(lat, lon) {
        document.getElementById("latlon").innerHTML = lat + ', ' + lon;
        document.getElementById("wkt").innerHTML = 'POINT('+lon+' '+lat +')';
    }
    
    function getOSMMapType() {
        // Usage: map.addMapType(getOSMMapType());
        var copyright = new GCopyrightCollection(
            '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
        );
        copyright.addCopyright(
            new GCopyright(1, new GLatLngBounds(
                new GLatLng(-90, -180),
                new GLatLng(90, 180)
            ), 0, ' ')
        );
        var tileLayer = new GTileLayer(copyright, 1, 18, {
            tileUrlTemplate: 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png', 
            isPng: false
        });
        var mapType = new GMapType(
            [tileLayer], G_NORMAL_MAP.getProjection(), 'OSM'
        );
        return mapType;
    }
    
    function showMap() {
        window.gmap = new google.maps.Map2(document.getElementById('gmap'));
        gmap.addControl(new google.maps.LargeMapControl());
        gmap.addControl(new google.maps.MapTypeControl());
        gmap.addMapType(getOSMMapType());    
        gmap.enableContinuousZoom();
        gmap.enableScrollWheelZoom();
        
        var timer = null;
        
        google.maps.Event.addListener(gmap, "move", function() {
            var center = gmap.getCenter();
            updateLatLonFields(center.lat(), center.lng());
            
            // Wait a second, then figure out the timezone
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            timer = setTimeout(function() {
                document.getElementById('timezonep').style.display = 'none';
                document.getElementById('datetimep').style.display = 'none';
                // Look up the timezone using geonames
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = "http://ws.geonames.org/timezoneJSON?lat=" + center.lat() +
                    "&lng=" + center.lng() + "&callback=timezoneLoaded";
                document.getElementsByTagName("head")[0].appendChild(s);
            }, 1500);
            
        });
        google.maps.Event.addListener(gmap, "zoomend", function(oldZoom, newZoom) {
            document.getElementById("zoom").innerHTML = newZoom;
        });
        google.maps.Event.addDomListener(document.getElementById('crosshair'),
            'dblclick', function() {
                gmap.zoomIn();
            }
        );
        
        // Default view of the world
        gmap.setCenter(
            new google.maps.LatLng(47.68018294648414, 13.7548828125), 7
        );
        
        /* If we have a best-guess for the user's location based on their IP, 
           show a "zoom to my location" link */
        if (google.loader.ClientLocation) {
            var link = document.createElement('a');
            link.onclick = function() {
                gmap.setCenter(
                    new google.maps.LatLng(
                        google.loader.ClientLocation.latitude,
                        google.loader.ClientLocation.longitude
                    ), 8
                );
                return false;
            }
            link.href = '#'
            link.appendChild(
                document.createTextNode('Zoom to my location (by IP)')
            );
            var form = document.getElementById('geocodeForm');
            var p = form.getElementsByTagName('p')[0];
            p.appendChild(link);
        }
        
        // Set up Geocoder
        window.geocoder = new google.maps.ClientGeocoder();
        
        // If query string was provided, geocode it
        var bits = window.location.href.split('?');
        if (bits[1]) {
            var location = decodeURI(bits[1]);
            document.getElementById('geocodeInput').value = location;
            geocode(location);
        }
        
        // Set up the form
        var geocodeForm = document.getElementById('geocodeForm');
        geocodeForm.onsubmit = function() {
            geocode(document.getElementById('geocodeInput').value);
            return false;
        }
    }
    
    var accuracyToZoomLevel = [
        1,  // 0 - Unknown location
        5,  // 1 - Country
        6,  // 2 - Region (state, province, prefecture, etc.)
        8,  // 3 - Sub-region (county, municipality, etc.)
        11, // 4 - Town (city, village)
        13, // 5 - Post code (zip code)
        15, // 6 - Street
        16, // 7 - Intersection
        17, // 8 - Address
        17  // 9 - Premise
    ];
    
    function geocodeComplete(result) {
        if (result.Status.code != 200) {
            alert('Could not geocode "' + result.name + '"');
            return;
        }
        var placemark = result.Placemark[0]; // Only use first result
        var accuracy = placemark.AddressDetails.Accuracy;
        var zoomLevel = accuracyToZoomLevel[accuracy] || 1;
        var lon = placemark.Point.coordinates[0];
        var lat = placemark.Point.coordinates[1];
        gmap.setCenter(new google.maps.LatLng(lat, lon), zoomLevel);
    }
    
    function geocode(location) {
        geocoder.getLocations(location, geocodeComplete);
    }
    
    google.setOnLoadCallback(showMap);
    </script>

    bzw. der head-
    <style type="text/css">
    div#hd {
        text-align: center;
    }
    div#ft {
    
    }
    div#ft p {
        width: 500px;
        margin: 1em auto;
    }
    div#bd {
        position: relative;
    }
    div#gmap {
        width: 100%;
        height: 400px; /* If you change this don't forget to change the crosshair position to match */
    }
    div#crosshair {
        position: absolute;
        top: 192px;
        height: 19px;
        width: 19px;
        left: 50%;
        margin-left: -8px;
        display: block;
        background: url(crosshair.gif);
        background-position: center center;
        background-repeat: no-repeat;
    }
    </style>

    und body-eintrag:
    <div id="bd">
            <div id="gmap"></div>
            <div id="crosshair"></div>
    
        </div>
    
    <div id="hd">
            <form action="http://maps.google.com/maps" id="geocodeForm">
                <p></br>
                    <label for="geocodeInput">direkte Suche: </label>
                    <input type="text" name="q" id="geocodeInput" placeholder="Stra&szlig;e, Ort, Bundesland" style="width:180px;">
                    <!-- "Accessible" version of Google Maps: -->
    
                    <input type="hidden" name="output" value="html">
                    <input type="submit" value="finden" class="button_p_neu">
                </p></br>
            </form>
        </div>
    
        <div id="ft">
            <p><strong>Latitude, Longitude:</strong> <span id="latlon"></span></p>
    	</div>
    	<div id="ft" style="display:none;">
            <p><strong>WKT:</strong> <span id="wkt"></span></p>
            <p><strong>Google Maps zoom level:</strong> <span id="zoom"></span></p>
        </div>
    
    
    
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    
    <script type="text/javascript">
    var _uacct = "UA-1090368-4"; urchinTracker();
    </script>


    Im localhost funktioniert alles einwandfrei, doch sobald ich es hochlade, werden die Karte und die Koordinaten nicht mehr angezeigt. das komplette div bleibt einfach leer bzw. zeigt: Longitude, Latitude: "leer "

    (selbes problem auch auf einer weiteren seite, auf welcher dann eine strecke auf einer gmap gezeichnet wird...)

    worin liegt jetzt der Fehler?
    bzw. wo ist der Unterschied, dass es im localhost funktioniert und online nicht mehr?

    bin für jegliche Hilfe äußerst dankbar!
    mfg
    Cdot
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Ich vermute, der API-Key paßt nicht zur Domain, auf der das Skript eingesetzt werden soll. :wink:
    Einen passenden neuen Key bekommst Du hier: http://code.google.com/intl/de-DE/apis/loader/signup.html
  4. Autor dieses Themas

    cdot

    Kostenloser Webspace von cdot

    cdot hat kostenlosen Webspace.

    Das mit dem key war mein erstes Problem: Hatte ihn zu Testzwecken auf cdot.lima-city.de/... angemeldet, was nichts gebracht hat. Hab dann in einem Forum gefunden, dass eine domain nur mit "www." angegeben werden kann. Darufhin hab ichs in ein Unterverzeichnis kopiert, um es dort zu testen, woraufhin die Fehlermeldung eines falschen API-keys nicht mehr kam...
    die Karten allerdings auch nicht :wink:
  5. Habe es gerade mal aus deinen Codeschnipseln zusammengebaut.
    Einzige Änderungen:
    - API-Key ersetzt
    - Doctype hinzugefügt
    - Referenz zum ursprünglichen Autor eingefügt. :wink:


    Ergebnis: *click mich* :thumb:

    Wenn Du die Zeitzone und Lokalzeit nicht brauchst, scheint mir zumindest so, da aus der Ausgabe entfernt, kannst Du den Scriptcode noch kürzen und die Requests zu Geonames und Appspot sparen..
    Die Abfrage über Appspot ist eh überflüssig, da Geonames die Lokalzeit im ersten Request bereits mitliefert.


    Das mit dem key war mein erstes Problem: Hatte ihn zu Testzwecken auf cdot.lima-city.de/... angemeldet, was nichts gebracht hat. Hab dann in einem Forum gefunden, dass eine domain nur mit "www." angegeben werden kann.

    Hm, mein benutzter Key läuft auch auf http://fatfreddy.lima-city.de. Einzige Einschränkung bei Google: "A single API key is valid within a single directory on your web server, including any subdirectories. ". Das kann es also nicht sein.

    Möglicher Fehler bei dir könnte noch die Positionierung des Scriptcodes innerhalb des HTML-Dokumentes sein. Kann man leider anhand der Schnipsel nicht erkennen..

    Beitrag zuletzt geändert: 23.1.2012 20:12:11 von fatfreddy
  6. Autor dieses Themas

    cdot

    Kostenloser Webspace von cdot

    cdot hat kostenlosen Webspace.

    So, es funktioniert!

    Es lag tatsächlich an der Positionierung des scriptes. das war das ganze Problem...

    Auch die Wegberechnung funktioniert jetzt. Allerdings weiß ich nicht recht, was ich davon halten soll: Bei einem Freund und mir gings bis auf ein paar Meter genau, bei anderen "Testpersonen" wird irgendeine Startposition angezeigt, die teilweise um 80km abweicht...

    Vielleicht findet sich ja noch etwas genaueres bzw. konstanteres.

    mit bestem Dank für die Hilfe und freundlichen Grüßen!
    cdot
  7. cdot schrieb:

    Auch die Wegberechnung funktioniert jetzt. Allerdings weiß ich nicht recht, was ich davon halten soll: Bei einem Freund und mir gings bis auf ein paar Meter genau,....

    Die Wegberechnung ist aber ein anderes Skript, oder? Davon ist in deinem Beispielcode nämlich nichts zu sehen.

  8. Autor dieses Themas

    cdot

    Kostenloser Webspace von cdot

    cdot hat kostenlosen Webspace.

    fatfreddy schrieb:
    Die Wegberechnung ist aber ein anderes Skript, oder? Davon ist in deinem Beispielcode nämlich nichts zu sehen.

    Sehr richtig. Hat aber vorhin auch nicht funktioniert (Karte wurde auch nicht angezeigt).

    Jetzt funktioniert es im Grune so wie ich mir dass vorstelle, nur wie gesagt bei jedem zweiten Versuch doch recht ungenau mit der Startposition...
  9. Wie ermittelst Du die Startpositionen und wie wird die Wegstrecke berechnet? Sind die Fehler reproduzierbar?

    Beitrag zuletzt geändert: 24.1.2012 11:54:41 von fatfreddy
  10. Autor dieses Themas

    cdot

    Kostenloser Webspace von cdot

    cdot hat kostenlosen Webspace.

    fatfreddy schrieb:
    Wie ermittelst Du die Startpositionen und wie wird die Wegstrecke berechnet? Sind die Fehler reproduzierbar?

    Habe mich dabei zum größten Teil an diese Beschreibung gehalten:http://robertnyman.com/2010/03/15/geolocation-in-web-browsers-to-find-location-google-maps-examples/...

    Wie/Warum genau der Fehler auftritt kann ich nicht sagen. Aber wie gesagt: einmal beträgt die Ungenauigkeit lediglich ein paar Meter, ein anderes Mal (auch vom selben PC) viele Kilometer...

    Viel geändert ist an dem Code im Grunde nicht, bis auf das variierende Ziel und die Anzeige, wenn keine Zieladresse angegeben wurde...
  11. Die Startposition holst Du über die Geolocation-Funktion?
    Wenn der Computer per DSL angebunden ist, wird der Standort über die IP ermittelt. Das ist naturgemäß nicht sonderlich exakt und gibt meist nur den Standort deines Providers zurück.

    Genauere Daten gibt es eventuell, wenn Wlan aktiviert UND Google die ID eines erreichbaren Nodes kennt.
    Ähnlich sieht es bei GSM-Anbindung aus. Dann wird anhand der Funkzelle lokalisiert.
    Wirklich genau ist es aber erst, wenn der Client GPS-Daten übermitteln kann.
  12. Autor dieses Themas

    cdot

    Kostenloser Webspace von cdot

    cdot hat kostenlosen Webspace.

    fatfreddy schrieb:
    Die Startposition holst Du über die Geolocation-Funktion?

    Ja, zur Zeit schon. Wobei ich am überlegen bin, ob man sich nicht eventuell mit einer Adresse bzw. mit Koordinaten anmelden sollte, um IMMER eine genau Route ausgeben zu können.

    fatfreddy schrieb:
    Wenn der Computer per DSL angebunden ist, wird der Standort über die IP ermittelt. Das ist naturgemäß nicht sonderlich exakt und gibt meist nur den Standort deines Providers zurück.

    Aber warum passiert es dann, dass mir eine sehr Abwegige Startadresse ausgegeben wird, und bei einem "Aktualisieren" der Seite wird mir fast die richtige Adresse gezeigt? Sollte die Abweichung nicht immer ungefähr gleich sein?

    fatfreddy schrieb:
    Wirklich genau ist es aber erst, wenn der Client GPS-Daten übermitteln kann.

    Verstehe ich das richtig, und die Startposition sollte via Smartphone z.B. sehr genau lokalisiert werden können?
    Denn selbst bei einem Test mit diesem war die Abweichung sehr groß...
  13. cdot schrieb:
    Ja, zur Zeit schon. Wobei ich am überlegen bin, ob man sich nicht eventuell mit einer Adresse bzw. mit Koordinaten anmelden sollte, um IMMER eine genau Route ausgeben zu können.

    Das wäre sicher zuverlässiger. Die Standortabfrage per Geolocation kannst Du ja weiterhin als Fallback nutzen. Z.B. wenn ein Nutzer keine Positionsdaten hinterlegt hat.

    Aber warum passiert es dann, dass mir eine sehr Abwegige Startadresse ausgegeben wird, und bei einem "Aktualisieren" der Seite wird mir fast die richtige Adresse gezeigt? Sollte die Abweichung nicht immer ungefähr gleich sein?

    Schwer zu erkennen, wenn man kein konketes Beispiel auswerten kann. Über welchen Anbieter war der PC denn im Netz? War WLan aktiv?

    Verstehe ich das richtig, und die Startposition sollte via Smartphone z.B. sehr genau lokalisiert werden können?
    Denn selbst bei einem Test mit diesem war die Abweichung sehr groß..

    Werden KÖNNEN!
    War der GPS-Empfänger beim Test aktiv und wenn ja, die Übertragung seiner Daten möglich/erlaubt?
    Ansonsten werden die Daten der Funkzelle genutzt und da kann es durchaus sein, daß das Phone sich zwischenzeitlich bei einer anderen angemeldet hat.

    Hast Du eventuell einen Link zu deiner entsprechenden Seite? Dann kann man mal ein wenig experimentieren. Eventuell liegt das Problem ja an ganz anderer Stelle. :wink:

    Beitrag zuletzt geändert: 26.1.2012 17:17:19 von fatfreddy
  14. Autor dieses Themas

    cdot

    Kostenloser Webspace von cdot

    cdot hat kostenlosen Webspace.

    Sorry für meine recht lange Inaktivität...

    fatfreddy schrieb:
    Hast Du eventuell einen Link zu deiner entsprechenden Seite? Dann kann man mal ein wenig experimentieren. Eventuell liegt das Problem ja an ganz anderer Stelle. :wink:
    Hier mal der link zu dem hier besprochenen Thema.


    Schwer zu erkennen, wenn man kein konketes Beispiel auswerten kann. Über welchen Anbieter war der PC denn im Netz? War WLan aktiv?
    Bei mir immer aon und WLan ist ebenfalls immer aktiv (3 sichtbare Netzwerke).


    War der GPS-Empfänger beim Test aktiv und wenn ja, die Übertragung seiner Daten möglich/erlaubt?

    Da ich selbst nicht im Besitz eines Smartphones bin, kann ich diese Frage leider nicht beantworten, aber zulassen muss man es meines Wissens nach sowieso immer, sonst wird die Funktoin gar nicht gestartet... (Ich hoffe ich liege dabei nicht auch wieder falsch :smile:)

  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!