Grössenanpassung Marker

Ein Marker kann in diesem Beispiel per separater Buttons in seiner Grösse geändert werden. Zusätzlich ist eine Grössenanpassung des Markers in Abhängigkeit von der Zoomstufe integriert.

Quellcode Grössenanpassung Marker

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

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

//Variablen
var w = 40;
var h = 40;
var _w = 10;
var _h = 10;
var latlng;
var zoom = 15;
//zur Sicherheit, falls Laden der API etwas dauert
setTimeout(function() {
    //Kartenzentrum
    latlng = new google.maps.LatLng(47.18256264437093, 8.521463871002197);
    //Kartenoptionen
    var mapOptions = {
        zoom: zoom,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    //Einblendung Karte und Kontrollen
    $("#map_canvas").removeClass("d-none")
    $("div[data-id='itb']").removeClass("d-none");
    //Initialisdieren Karte
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    //Definieren des Markers incl. Text, Farben und Grösse
    var pinIcon =new google.maps.MarkerImage(
        "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|hier|FF8080|000000",
        new google.maps.Size(42, 42),
        new google.maps.Point(0,0),
        new google.maps.Point(0, 42),
        new google.maps.Size(w, h)
    );
    //Marker auf Karte anzeigen
    marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: pinIcon
    });
    //Funktion für den Fall dass Zoom geöndert wird
    google.maps.event.addListener(map, 'zoom_changed', function() {
        _changeMarkerByZoom();
    });

}, 1000);

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

Grössenanpassung Marker

Beispiel

Quellcode Grössenanpassung Marker

Source: HTML

Source: JavaScript #1 - Laden der API

Source: JavaScript #2 - Initialisieren der Karte

Source: JavaScript #3 - Markergrösse auf Buttondruck

Source: JavaScript #4 - Markergrösse bei Zoom-Funkltion

Endlich Saisonbeginn

Der Rockstar unter den Komponisten