JSFiddle - React, Tailwind, and code Playground

by telizpablo

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3hIDmm4yGIlfXvIFCUJsw3BijQ1quEM8&amp;callback=initMap"></script>
<p>Click the button to get your coordinates.</p>

<button onclick="initMap()">Cade eu?!</button>

<p id="demo"></p>

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

CSS

html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      
      #map {
        height: 100%;
      }

JavaScript

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 6
  });
  var infoWindow = new google.maps.InfoWindow({
    map: map
  });

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Achei vc!?<img src="https://i.ytimg.com/vi/XZJvyemxhq0/hqdefault.jpg" width="80px"/>');
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
    'Error: The Geolocation service failed.' :
    'Error: Your browser doesn\'t support geolocation.');
}