JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANh0YzZG-vsBwun96VJTXO6OGqnjIpzCE"></script>

<h3>Markers with custom icons</h3>

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

CSS

#map {
    width: 500px;
    height: 350px;
}

JavaScript

// global variables

var map, bounds;
var sLat=42;
var sLng = -70;

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

function initialize() {
  bounds = new google.maps.LatLngBounds()
  var mapOptions = {
    zoom:8,
    center: new google.maps.LatLng(42,-70)
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
    
    generateMarkers();
} 

// I'm using an API created by an Internet user to generate icons:
// SERVICE: http://www.googlemapsmarkers.com/
// Format for the URL for the marker is:
// http://www.googlemapsmarkers.com/v1/LABEL/FILL COLOR/LABEL COLOR/STROKE COLOR/
var baseURL = "http://www.googlemapsmarkers.com/v1/"

// letters and colors can be something of your choice
var letters = ['A', 'B', 'C', 'D', 'E', 'F']
var colors = ['966FD6', 'FFB347', 'FFD1DC', 'C23B22', '00cdcd',
              'fede34']


function generateMarkers(){
    for (var i=0;i<letters.length;i++){
        var url = baseURL + letters[i] + '/' + 
            colors[i] + '/fff/777';
        // automatically generate a latlng object
        var latLng = new google.maps.LatLng(sLat+(i+1), sLng-(i+1));
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: url});
        bounds.extend(latLng);
    }
    map.fitBounds(bounds);
    
}