JSFiddle - React, Tailwind, and code Playground

by chrisbenseler

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map-canvas"></div>

CSS

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

JavaScript

var map; 
function initialize() {
    
    var mapOptions = {
        center: { lat: -23.5353296, lng: -46.6835965},
        zoom: 14
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
                                  mapOptions);
    
    var service = new google.maps.places.PlacesService(map);
    //
    
    var ll = new google.maps.LatLng(-23.5353296,-46.6835965,17);
    
    var request = {
        location: ll,
        radius: '500',
        name: "Banco do Brasil",
        type: "bank"
    };
    
    
    //service.nearbySearch(request, function(response) {
    //    console.log(response);   
    //});
    service.radarSearch(request, callback);
    
};

var callback = function(results, status) {
  if (status != google.maps.places.PlacesServiceStatus.OK) {
    alert(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    createMarker(result);
  }
};

function createMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(place, function(result, status) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
      }
      infoWindow.setContent(result.name);
      infoWindow.open(map, marker);
    });
  });
}

//google.maps.event.addDomListener(window, 'load', initialize);
initialize();