Vue

by WILLIAM CORREA

HTML

<div id="q-map">
  <div id="map"></div>
</div>

<hr>

<div id="app">
  <map-embed />
</div>

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>

<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6gp1pEhlbmLI_IFrl8-QGFJp2D158tVA&callback=initMap&libraries=&v=weekly"
        async
></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 400px;
}

#q-map {
  display: none;
}

Vue

function initMap() {
  const locations = [];
  for (let i = 0; i < 32000; i++) {
    // -3.7079856,-38.7540631
    const lat = -1 * ((Math.random() * 1) + 3.5).toFixed(4)
    const lng = -1 * ((Math.random() * 1) + 38).toFixed(4)
    locations.push({ lat, lng })
  }

  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -3.6983927, lng: -38.6757855 },
    streetViewControl: false,
    gestureHandling: 'greedy'
  });

// Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  const markers = locations.map((location, i) => {
    return new google.maps.Marker({
      position: location,
      title: `${location.lat}, ${location.lng}`,
    });
  });
  // Add a marker clusterer to manage the markers.
  new MarkerClusterer(map, markers, {
    imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
  });

  const geocoder = new google.maps.Geocoder();
  document.getElementById("submit").addEventListener("click", () => {
    geocodeAddress(geocoder, map);
  });
}

function geocodeAddress(geocoder, resultsMap) {
  const address = document.getElementById("address").value;
  geocoder.geocode({ address: address }, (results, status) => {
    if (status === "OK") {
      resultsMap.setCenter(results[0].geometry.location);
      new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location,
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

const MapEmbed = {
  template: '<div>' +
  	  '<div ref="embed"></div>' +
      '<hr>' +
      '<button @click="show">show</button> | <button @click="hide">hide</button>' +
    '</div>',
  methods: {
  	show () {
   ...