Google Maps

The google maps feature will let you implement a map to your website. Easy step by step instructions!

(() => {
    // * INSTRUCTIONS *
    // ========================================================================================
    //
    //  Replace the string of the "selector" variable with the selector of the element you want to conatain the 
    // map
    //
    // Replace the string of the "googleAPIkey" with your Google API key.
    //
    // You can aqcuire an API key following the instructions:
    //
    // https://developers.google.com/maps/documentation/maps-static/get-api-key#get-key
    //
    // Pick the coordinates, size of the map element and the zoom, and enjoy your interactive Google Map
    //
    // ========================================================================================
    //
    // pick a selector from the page and enter it in this section (has to be a string)
    // ------------------------------------------------------------------
    let selector = "enter your selector here";
    // ------------------------------------------------------------------
    //
    // enter your Google API key here (has to be a string)
    // ------------------------------------------------------------------
    let googleAPIkey = "enter your google api key here";
    //
    // change the latitude and longitude where the map will be centered (can be a string or a number)
    let latitude = 32.053;
    let longitude = 34.772;
    //
    // change the size of the map element (has to be a string with pixels or percentages)
    // ------------------------------------------------------------------
    let height = "500px";
    let width = "500px";
    //
    // change the zoom of the map (can be a string or a number)
    let zoom = "16";
    //
    //
    //  OPTIONAL: add or remove coordinates to add markers to the map
    // in case no markers are needed - leave the array empty
    let markers = [
        [32.053, 34.772],
        [31.7683, 35.2137],
    ];
    //
    //
    //
    //
    // start of functionality
    // ========================================================================================
    let targetElement = document.querySelector(selector);
    targetElement.innerHTML = `<div id="map"></div>`;
    $("head").append(
        ``
    );
    $("head").append(` #map {
      height: ${height};
      width: ${width};
      `);
    $("head").append(`
      let map;
      let market;
 
      function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: ${latitude}, lng: ${longitude} },
          zoom: ${zoom},
      });
      }
    `);
    $("body").append(
        ``
    );
    // adding markers when variable "google" becomes available
    let interval;

Overview

The google maps feature will let you implement a map to your website. Easy step by step instructions, minimum configurations and amazing upgrade to your website!