bekannte Koordinaten visualisieren und Location ermitteln

Dies soll dazu dienen, bekannte Koordinaten auf der Karte anzuzeigen.

Quellcode Koordinaten visualisieren und Location ermitteln

Laden der MAP-API nach einer Bestätigung o.ä..

YOURKEYHERE bitte durch Deinen API-Key ersetzen. Informationen dazu bei Google.

//Koordinaten statisch oder wie hier aus Eingabefeld
var val = $("#coord").val();
//Einfacher Check ob es valide Koordinatenpaare sind
if(val.indexOf(",") > -1){
    //Optionen für Karte
    var mapoptions = {
        icon: '/img/page/map-marker.png', //Marker-Icon
        lat: parseFloat(val.split(",")[0]), //Breitengrad
        lng: parseFloat(val.split(",")[1]), //Längengrad
        type: "ROADMAP",    //Kartentyp
        cscheme: "dark",    //Farbschema
        controls: false,    //Kartencontrole ausblenden?
        zoom: 15            //Zoomstufe
    }
    //zur Sicherheit, falls Laden der API etwas dauert
    setTimeout(function() {
        //Map einblenden
        $("#map_canvas").removeClass("d-none");
        //Punkt in geografischen Koordinaten: Breiten- und Längengrad.
        myLatlng = new google.maps.LatLng(mapoptions.lat, mapoptions.lng);
        //Optionen für Karte
        myOptions = {
            zoom: mapoptions.zoom,  //Zoomstufe
            center: myLatlng,       //Koordinatenpunkt
            styles: getColors(mapoptions.cscheme),  //Farbschema definieren siehe Punkt "Source: JavaScript #4 - Farbschema zuweisen"
            disableDefaultUI: mapoptions.controls   //Kartencontrole ausblenden?
        };
        //Map initialisieren
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        _setType(mapoptions.type, map); //Kartentyp siehe Punkt "Source: JavaScript #3 - Kartentyp zuweisen"
        //Marker definieren
        var marker = new google.maps.Marker({
            position: myLatlng,     //Koordinatenpunkt
            map: map,               //unsere Karte
            title: "Standort",
            icon: mapoptions.icon   //Marker-Icon
        });
        //initialisieren Adress-Suche
        geocoder = new google.maps.Geocoder();
        geocoder.geocode({'latLng': myLatlng}, function(results, status) {
            //Ergebniss der Abfrage
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                    var f = document.getElementById("geodata");
                    var fv = results[1].formatted_address;
                    //Ergebnis ausgeben
                    geodata.value = fv;//.replace("(","").replace(")","");
                } else {
                    console.log('No results found'); //nichts gefunden
                }
            } else {
                console.log('Geocoder failed due to: ' + status);   //Ausgabe bei Fehler
            }
        });
    }, 500);
}

function getColors(aId){
    switch(aId)
    {
        case "normal":
            return false;
        case "dark":
            return [
                {
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#1d2c4d"
                        }
                    ]
                },
                {
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#8ec3b9"
                        }
                    ]
                },
                {
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "color": "#1a3646"
                        }
                    ]
                },
                {
                    "featureType": "administrative.country",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#4b6878"
                        }
                    ]
                },
                {
                    "featureType": "administrative.land_parcel",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#64779e"
                        }
                    ]
                },
                {
                    "featureType": "administrative.province",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#4b6878"
                        }
                    ]
                },
                {
                    "featureType": "landscape.man_made",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#334e87"
                        }
                    ]
                },
                {
                    "featureType": "landscape.natural",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#023e58"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#283d6a"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#6f9ba5"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "color": "#1d2c4d"
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#023e58"
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#3C7680"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#304a7d"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#98a5be"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "color": "#1d2c4d"
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#2c6675"
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#255763"
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#b0d5ce"
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "color": "#023e58"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#98a5be"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "color": "#1d2c4d"
                        }
                    ]
                },
                {
                    "featureType": "transit.line",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#283d6a"
                        }
                    ]
                },
                {
                    "featureType": "transit.station",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#3a4762"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#0e1626"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#4e6d70"
                        }
                    ]
                }
            ]
    }

}

Youtube

aktuelle Anzahl Videos:

128

Alles anschauen

letztes Video

Assassin's Creed Valhalla: Rüstung der Verborgenen gleich nach Ankunft in Englaland (15:29 min)

Assassin's Creed Valhalla: Erbeuten der Verborgenen-Rüstung gleich zu Beginn; Die Rüstung ist das ganze Spiel nutzbar und durch den sofortigen Erhalt genügt es, Ressourcen nur für diese für dessen Aufwertung zu verwenden.

Zuletzt in diesem Kino

14.01.2018

Admin

Endlich Saisonbeginn

Endlich gings los. Diesmal am Flumserberg...
Read more

07.05.2017

Admin

Der Rockstar unter den Komponisten

Als Oscar-Preisträger Hans Zimmer im Frühjahr 2016 erstmals auf Konzertreise ging, waren die Arenen in den grossen europäischen Städten restlos ausverkauft. Diesmal sind wir dabei...
Read more

bekannte Koordinaten visualisieren und Location ermitteln

Eingabe Koordinaten

Quellcode Koordinaten visualisieren und Location ermitteln

Source: HTML

Source: JavaScript #1 - Laden der API

Source: JavaScript #2 - Anfordern der Daten

Source: JavaScript #3 - Kartentyp zuweisen

Source: JavaScript #4 - Farbschema zuweisen

Endlich Saisonbeginn

Der Rockstar unter den Komponisten