JS: Eine weitere Variable nutzen

Windwusel08.02.1820:50

Hallo,

ich hatte schon lange nichts mehr mit Webentwicklung gemacht. Ich hoffe mir kann hier jemand kurz zur Hand gehen. Es geht um eine Karte von Google in JS. Ich möchte diese in einer Webseite einbetten, was auch funktioniert, jedoch möchte ich weitere "Marker" einfügen. Offensichtlich mache ich dabei etwas verkehrt.

}(this, this.document);
jQuery(document).ready(function(e) {
    function t(e, t) {
        var n = document.getElementById("zoom-in"),
            r = document.getElementById("zoom-out");
        e.appendChild(n);
        e.appendChild(r);
        google.maps.event.addDomListener(n, "click", function() {
            t.setZoom(t.getZoom() + 1)
        });
        google.maps.event.addDomListener(r, "click", function() {
            t.setZoom(t.getZoom() - 1)
        })
    }
    var n = 50.03312,
        r = 8.47823,
        nn = 20.48536,
        rr = 2.25949,
        i = 10; /* Zoom*/
    var s = navigator.userAgent.toLowerCase().indexOf("trident") > -1;
    var o = s ? "images/icon-location.png" : "images/icon-location.svg";
    var u = "#2d313f",
        a = -20,
        f = 5;
    var l = [{
        elementType: "labels",
        stylers: [{
            saturation: a
        }]
    }, {
        featureType: "poi",
        elementType: "labels",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "road.highway",
        elementType: "labels",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "road.local",
        elementType: "labels.icon",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "road.arterial",
        elementType: "labels.icon",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "road",
        elementType: "geometry.stroke",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "transit",
        elementType: "geometry.fill",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "poi",
        elementType: "geometry.fill",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "poi.government",
        elementType: "geometry.fill",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "poi.sport_complex",
        elementType: "geometry.fill",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "poi.attraction",
        elementType: "geometry.fill",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "poi.business",
        elementType: "geometry.fill",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "transit",
        elementType: "geometry.fill",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "transit.station",
        elementType: "geometry.fill",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "landscape",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "road",
        elementType: "geometry.fill",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "road.highway",
        elementType: "geometry.fill",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }, {
        featureType: "water",
        elementType: "geometry",
        stylers: [{
            hue: u
        }, {
            visibility: "on"
        }, {
            lightness: f
        }, {
            saturation: a
        }]
    }];
    var c = {
        center: new google.maps.LatLng(nn, rr),
        zoom: i,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        styles: l
    };
    var h = new google.maps.Map(document.getElementById("google-container"),  c);
    var p = new google.maps.Marker({
        position: new google.maps.LatLng(nn, rr),
        map: h,
        visible: true,
        icon: o
    });
    var c = {
        center: new google.maps.LatLng(n, r),
        zoom: i,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        styles: l
    };
    var h = new google.maps.Map(document.getElementById("google-container"),  c);
    var p = new google.maps.Marker({
        position: new google.maps.LatLng(n, r),
        map: h,
        visible: true,
        icon: o
    });
    var d = document.createElement("div");
    var v = new t(d, h);
    h.controls[google.maps.ControlPosition.LEFT_TOP].push(d)
})

„MacBook Pro mit Touch Bar (15-inch, 2018), iPhone 12 Pro Max und iPhone X, AirPods (1. Gen) & AirPods Pro (1. Gen), Apple TV 4K (1. Gen) und HomePod (1. Gen)“

0

MikeMuc09.02.1808:02

Ich nutze da immer ein Array mit Koordinaten, markertyp und Titel und Einblendtext bei Mousover. Hab mir das aber auch nur per Google zusammen gesucht. Da gibt es ja Tonnen von Beispielen wenn man mal nach googlemaps und Marker sucht. Hast du das schon gemacht?

0

Windwusel09.02.1809:51

Die Google Variante hatte bei mir nicht funktioniert, weil diese nicht mehr mit den Style Elementen Kompatibel ist. Außerdem braucht es so wie ich es vorhabe keinen API-Key
Hast du vielleicht einen Code mit dem ich meinen ergänzen kann?

„MacBook Pro mit Touch Bar (15-inch, 2018), iPhone 12 Pro Max und iPhone X, AirPods (1. Gen) & AirPods Pro (1. Gen), Apple TV 4K (1. Gen) und HomePod (1. Gen)“

0

MikeMuc09.02.1812:09

Ja, hier eine etwas älterer aber auch funktionierender Teil: Du mußt deinen Key entsprechend einsetzen. Und im Array "data" deine eigene Liste mit Zielen. Da meine HTML-Dtei aus einer Datenbank dynamisch generiert wird ist locationData.label == '31' bei jedem Export anders. Entspricht dem Label aus der Liste. Keine Ahnung ob diese Lösung die eleganteste ist. Für meinen Zweck funktioniert sie halt. Eine weitergehende Variante habe ich auch mal gemacht. Dort kann man die Marker verschieben und es werden dann die neuen Koordinaten ausgegeben. Leider hab ich es nicht geschafft, die dann auch automatisch in die Fielmakerdatei zurück zu bekommen. Mußte ich dann halt mit Copy & Paste selber machen.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<style type="text/css">
    .blackLabel {
         color: black;
         background-color: white;
         font-family: "Lucida Grande", "Arial", sans-serif;
         font-size: 10px;
         font-weight: bold;
         text-align: center;
         width: 35px;
         border: 2px solid black;
         white-space: nowrap;
    }
</style>

<style type="text/css">
    .gm-style-iw {
         height: 100% !important;
         width: 100% !important;
         foverflow: hidden !important;
    }
</style>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>fmGooglemapTP24int.html</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    </head>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=WindwuselsGo ogleApiKex&sensor=false"></script>
    <script type='text/javascript' src='http://google.wayok.de/markerwithlabel.js'></script>

    <script type="text/javascript">
        var data =[
                { 'longitude': 6.088007, 'latitude': 51.396262, 'label': '36', 'info': '2000231'},
            ];
        var infowindow = null;

        $(document).ready(function () { initMap();  });

        function initMap() {
            var map = new google.maps.Map( document.getElementById('map_canvas'), {
                zoom: 12,
                center: new google.maps.LatLng( data[ 4].latitude, data[ 4].longitude),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            setMarkers( map, data);
            infowindow = new google.maps.InfoWindow({ content: "loading..."});
        }


        function setMarkers( map, markers) {
            for (var i = 0; i < markers.length; ++i) {
                var locationData = markers[ i];

                var marker = new MarkerWithLabel({
                    position: new google.maps.LatLng( locationData.latitude, locationData.longitude),
                    draggable: false,
                    raiseOnDrag: false,
                    map: map,
                    labelContent: locationData.label,
                    labelAnchor: new google.maps.Point( 0, 50),
                    labelClass: "blackLabel", // the CSS class for the label
                    labelStyle: {opacity: 0.75},
                    content: '<class "gm-style-iw"><b>' + locationData.label + '</b><br><i>' + locationData.info + '</i>'
                });


                if ( locationData.label == '31') {
                    marker.setIcon("http://maps.google.com/mapfiles/ms/icons/red -dot.png");    <!-- aktuelle alte Station
                } else {
                    marker.setIcon("http://maps.google.com/mapfiles/ms/icons/pin k.png");    <!-- alte Station
                }

                google.maps.event.addListener( marker, "mouseover", function () {
                    infowindow.setContent( this.content);
                    infowindow.open( map, this);
                });

                google.maps.event.addListener( marker, "mouseout", function () {
                    infowindow.setContent( this.content);
                    infowindow.close( map, this);
                });
            }
        }
    </script>

    <body onload="initMap()">
        <div id="map_canvas" style="height: 665px; width: 100%;"/>
    </body>
</html>

0

Windwusel09.02.1815:10

Danke, aber ich möchte schon noch das aktuelle Script weiter nutzen und einfach nur um weitere Marker erweitern. Das ist also nicht ganz das was ich benötige.

„MacBook Pro mit Touch Bar (15-inch, 2018), iPhone 12 Pro Max und iPhone X, AirPods (1. Gen) & AirPods Pro (1. Gen), Apple TV 4K (1. Gen) und HomePod (1. Gen)“

0

HumpelDumpel09.02.1816:33

Erstens: So wie es oben steht

var c = ...
...
var c = ...

überschreibt das 2. das 1. c

Mal versucht, einfach nur den MarkerBlock zu duplizieren?

var p = new google.maps.Marker({
        position: new google.maps.LatLng(n, r),
        map: h,
        visible: true,
        icon: o
    });
var pp = new google.maps.Marker({
        position: new google.maps.LatLng(nn, rr),
        map: h,
        visible: true,
        icon: o
    });

+1

MikeMuc09.02.1816:43

Tja, dann ist du dir selber helfen müssen. Mein Beispiel soll ja nur zeigen wie ich die Anzeige mehrerer und unterschiedlicher Marker realisiert habe. Nun hast du die Wahl ob du das in dein Script übernehmen magst oder deine Dinge in mein Script überträgst Ich war froh das ich im Web etwas für mich funktionierendes gefunden habe was ich für meinen Zweck erweitern konnte

0

Windwusel09.02.1822:14

HumpelDumpel

Erstens: So wie es oben steht

var c = ...
...
var c = ...

überschreibt das 2. das 1. c

Mal versucht, einfach nur den MarkerBlock zu duplizieren?

var p = new google.maps.Marker({
        position: new google.maps.LatLng(n, r),
        map: h,
        visible: true,
        icon: o
    });
var pp = new google.maps.Marker({
        position: new google.maps.LatLng(nn, rr),
        map: h,
        visible: true,
        icon: o
    });

Hat funktioniert. Vielen Dank! Ich denke wirklich ordentlich ist diese Lösung aber nicht. Ich muss nämlich noch einige mehr Marker einfügen. Hast du eine Idee ob man das verschönern kann?

„MacBook Pro mit Touch Bar (15-inch, 2018), iPhone 12 Pro Max und iPhone X, AirPods (1. Gen) & AirPods Pro (1. Gen), Apple TV 4K (1. Gen) und HomePod (1. Gen)“

0

matt.ludwig09.02.1822:58

Etwas schöner wird es mit einem Array.
Richtig schick wenn du dir die benötigten Daten bei einem Webservice abholst.

Windwusel

HumpelDumpel

Erstens: So wie es oben steht

var c = ...
...
var c = ...

überschreibt das 2. das 1. c

Mal versucht, einfach nur den MarkerBlock zu duplizieren?

var p = new google.maps.Marker({
        position: new google.maps.LatLng(n, r),
        map: h,
        visible: true,
        icon: o
    });
var pp = new google.maps.Marker({
        position: new google.maps.LatLng(nn, rr),
        map: h,
        visible: true,
        icon: o
    });

Hat funktioniert. Vielen Dank! Ich denke wirklich ordentlich ist diese Lösung aber nicht. Ich muss nämlich noch einige mehr Marker einfügen. Hast du eine Idee ob man das verschönern kann?

0

MikeMuc10.02.1800:03

Tja, das mit dem Array hatte ich auch schon mit Beispiel vorgeschlagen. Hat aber keinen Anklang gefunden.

+1

Windwusel10.02.1800:10

MikeMuc

Tja, das mit dem Array hatte ich auch schon mit Beispiel vorgeschlagen. Hat aber keinen Anklang gefunden.

Weil ich damit nicht viel Anfangen kann wenn ich zu wenig Ahnung von JS habe. Wenn du mir deinen Code genau erklärst kann ich davon vielleicht auch Teile übernehmen aber einfach so kann ich kaum etwas damit anfangen. Der Vorschlag von HumpelDumpel war so gut, weil ich ihn und den Code verstehen konnte und dadurch etwas damit machen konnte. Abgesehen davon ist dein Code wie ich oben sagte etwas völlig anderes. Ich möchte schon mit meinem Script arbeiten. Wenn du mir zeigst wie das Array mit meinem Code aussieht, und am besten auch Erklärungen dazu schreibst, verwende ich ihn ganz bestimmt!

„MacBook Pro mit Touch Bar (15-inch, 2018), iPhone 12 Pro Max und iPhone X, AirPods (1. Gen) & AirPods Pro (1. Gen), Apple TV 4K (1. Gen) und HomePod (1. Gen)“

0

matt.ludwig10.02.1808:41

Oh sorry, das hab ich überlesen

MikeMuc

Tja, das mit dem Array hatte ich auch schon mit Beispiel vorgeschlagen. Hat aber keinen Anklang gefunden.

0

matt.ludwig10.02.1808:49

Kurz zum Thema, verharr dich bitte nicht auf dienen Code, auch wenn er funktioniert. Du profitierst mehr davon, den anderen zu verstehen und einsetzen zu können. JavaScript ist einfach zu lernen.

0

HumpelDumpel10.02.1809:24

Windwusel

Ich muss nämlich noch einige mehr Marker einfügen. Hast du eine Idee ob man das verschönern kann?

Der obere Block

var n = [50.03312, 20.48536],
r = [8.47823, 2.25949],
i = 10; /* Zoom*/

Der untere dann

var p = [];
for(i=0;i<n.length;i++){
    p[i] = new google.maps.Marker({
        position: new google.maps.LatLng(n[i], r[i]),
        map: h,
        visible: true,
        icon: o
    });
}

0

matt.ludwig10.02.1810:38

Ich würde den Schleifenzähler nicht i nennen, es gibt bereits eine Variable mit diesem Bezeichner.
Den Part mit

var p = [];
...
p[i] =

ist auch nur relevant, wenn du die Marker später weiterverarbeiten willst.

0

Unwindprotect10.02.1813:13

var positions = [
  {lat: 50.03312, lng: 8.47823},
  {lat: 20.48536, lng: 2.25949}
  ...
]

var markerOnPosition = function (pos) {
  return new google.maps.Marker({
    position: new google.maps.LatLng(coord.lat, coord.lng),
    map: h,
    visible: true,
    icon: o
  })
}

var markers = positions.map(markerOnPosition)

0

matt.ludwig10.02.1823:30

Er wird es nicht verstehen, er bat explizit um einfachen kommentieren Code

Unwindprotect

var positions = [
  {lat: 50.03312, lng: 8.47823},
  {lat: 20.48536, lng: 2.25949}
  ...
]

var markerOnPosition = function (pos) {
  return new google.maps.Marker({
    position: new google.maps.LatLng(coord.lat, coord.lng),
    map: h,
    visible: true,
    icon: o
  })
}

var markers = positions.map(markerOnPosition)

0

MikeMuc11.02.1815:35

Dann muß man rs halt mal lernen
Mußte ich auch als ich Marker für meine Filemakergeschichte haben wollte. Ich hab mir alle verfügbaren Beispiele angeschaut und dann daraus Javascript gelernt, die waren selten gut kommentiert. Muß man halt google fragen, man ist selber selten der erste Ochs der vorm Tor steht; zumindest hab ich die Erfahrung gemacht das oft andere schon die gleichen Problem hatten. Aus deren Fragen und Antworten hab ich mir dann meine Antworten zusammengereimt

+1

Kommentare

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.