Google Maps

• Soll kostenfrei sein
• Es muss aber eine Kreditkarte hinterlegt werden, die bei Nutzung unter einer definierten Grenze nicht belastet wird

Project
        WordPress Theme Dev

    API
        Maps JavaScript API
        Places API
        Geolocoding API

    Credentials
        key=API_KEY
        AIzaSyCnHV8gX63oxKVK6vSdwvPztscs2Qx9878

class GMap {
  constructor() {
    document.querySelectorAll(".acf-map").forEach(el => {
      this.new_map(el)
    })
  }

  new_map($el) {
    var $markers = $el.querySelectorAll(".marker")

    var args = {
      zoom: 16,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map($el, args)
    map.markers = []
    var that = this

    // add markers
    $markers.forEach(function (x) {
      that.add_marker(x, map)
    })

    // center map
    this.center_map(map)
  } // end new_map

  add_marker($marker, map) {
    var latlng = new google.maps.LatLng($marker.getAttribute("data-lat"), $marker.getAttribute("data-lng"))

    var marker = new google.maps.Marker({
      position: latlng,
      map: map
    })

    map.markers.push(marker)

    // if marker contains HTML, add it to an infoWindow
    if ($marker.innerHTML) {
      // create info window
      var infowindow = new google.maps.InfoWindow({
        content: $marker.innerHTML
      })

      // show info window when marker is clicked
      google.maps.event.addListener(marker, "click", function () {
        infowindow.open(map, marker)
      })
    }
  } // end add_marker

  center_map(map) {
    var bounds = new google.maps.LatLngBounds()

    // loop through all markers and create bounds
    map.markers.forEach(function (marker) {
      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng())

      bounds.extend(latlng)
    })

    // only 1 marker?
    if (map.markers.length == 1) {
      // set center of map
      map.setCenter(bounds.getCenter())
      map.setZoom(16)
    } else {
      // fit to bounds
      map.fitBounds(bounds)
    }
  } // end center_map
}

export default GMap

Leaflet

• Free JS Library
• https://leafletjs.com/
• HTML Element mit id: map notwendig

#
# Im Header
#
<link rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin="" 
/>

#
# Im Header nach (!) dem Stylesheet
#
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
        crossorigin="">
</script>

class LeafletMap {
    map;
    markerDivs;

    constructor() {
      // To avoid uncaught errors in L.map('map'), check for existence of html element with id="map"
      if(! document.getElementById("map")) 
        return;

      // collect all divs with class ".leaflet_marker"
      this.markerDivs = document.querySelectorAll(".leaflet_marker");
      this.load_map();
      this.addMarkers();
    }

    load_map() {
        this.map = L.map('map').setView([48.2526751, 11.6577365], 13);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }
        ).addTo(this.map);
    }

    addMarkers() {
      this.markerDivs.forEach(el => {
        L.marker([el.getAttribute("data-lat"), el.getAttribute("data-lng")], {title: "MICHI"}).addTo(this.map);
      })
    }
}
  
export default LeafletMap

Json Placeholder

• https://jsonplaceholder.typicode.com/
• Liefert eine Testumgebung für REST API
• Akzeptiert http Requests und antwortet mit JSON

# Beispiel Top Level Await (nur für Module)
# https://jsonplaceholder.typicode.com/posts
# await can be used OUTside a function
# but it is BLOCKING the module execution

const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await res.json();             # converts it into a JS Array with Objects

# anstelle von
async function f() {}

Deepl

• https://www.deepl.com/
• https://www.deepl.com/translator
• API:
  • https://api-free.deepl.com/v2/translate
• Docs
  • https://www.deepl.com/de/docs-api/translate-text/translate-text/

Generelles

Abonnementnummer: 2784167 - m13

Authentifizierungsschlüssel für die DeepL-API

    dfa951f0-fbc3-87d2-0f67-2007d4ab624e:fx

Beispiel Request

https://api-free.deepl.com/v2/translate?auth_key=dfa951f0-fbc3-87d2-0f67-2007d4ab624e:fx&text=This%20is%20a%20Test.&target_lang=DE


# Beispiel Konstanten zur URL Generierung

export const deeplBase = 'https://api-free.deepl.com/v2/translate?';
export const deeplKey = 'auth_key=dfa951f0-fbc3-87d2-0f67-2007d4ab624e:fx';
export const deeplText = 'text=';
export const deeplTargetLanguage = 'target_lang=';

newsapi

• https://newsapi.org/

Generelles

Authentifizierungsschlüssel für die DeepL-API - m13

    bb790aa633224d6db396a0d9121684fd

Beispiel Request

https://newsapi.org/v2/everything?q=tesla&pageSize=3&apiKey=bb790aa633224d6db396a0d9121684fd

https://newsapi.org/v2/everything?q=tesla&apiKey=bb790aa633224d6db396a0d9121684fd

# Beispiel Konstaten zur Gererierung der URL

export const newsapiBase = 'https://newsapi.org/v2/everything';
export const newsapiKey = 'bb790aa633224d6db396a0d9121684fd';
export const newsapiSize = 3;

Sonstige JS Libraries

Lodash

• Library of functions that cold have been impemented in JS but haven't. Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.Lodash’s modular methods are great for:
  • Iterating arrays, objects, & strings
  • Manipulating & testing values
  • Creating composite functions
• z.B. cloneDeep
• https://lodash.com/

 npm i [--save] lodash

GreenSock (GSAP)

• Animate Web items
• https://greensock.com/