JSFiddle - React, Tailwind, and code Playground

by Andy Mcloughlin

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Complex icons</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
            // The following example creates complex markers to indicate beaches near
            // Sydney, NSW, Australia. Note that the anchor is set to
            // (0,32) to correspond to the base of the flagpole.

            function initialize() {
                var mapOptions = {
                    zoom: 10,
                    center: new google.maps.LatLng(-33.9, 151.2)
                }
                var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

                setMarkers(map, beaches);
            }

            /**
             * Data for the markers consisting of a name, a LatLng and a zIndex for
             * the order in which these markers should display on top of each
             * other.
             */
            var beaches = [
                ['Bondi Beach', -33.890542, 151.274856, 4],
                ['Coogee Beach', -33.923036, 151.259052, 5],
                ['Cronulla Beach', -34.028249, 151.157507, 3],
                ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                ['Maroubra Beach', -33.950198, 151.259302, 1]
            ];

            function setMarkers(map, locations) {
                // Add markers to the map

                // Marker sizes are expressed as a Size of X,Y
                // where the origin of the image (0,0) is located
                // in the top left of the image.

                // Origins, anchor positions and coordinates of the marker
                //...

CSS

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

JavaScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to
// (0,32) to correspond to the base of the flagpole.

function initialize() {
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(-33.9, 151.2)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4, {
        message: 'nice place'
    }],
    ['Coogee Beach', -33.923036, 151.259052, 5,{
        message: 'cool place'
    }],
    ['Cronulla Beach', -34.028249, 151.157507, 3,{
        message: 'some place'
    }],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2,{
        message: 'small place'
    }],
    ['Maroubra Beach', -33.950198, 151.259302, 1,{
        message: 'place place'
    }]
];

function setMarkers(map, locations) {
    // Add markers to the map

    // Marker sizes are expressed as a Size of X,Y
    // where the origin of the image (0,0) is located
    // in the top left of the image.

    // Origins, anchor positions and coordinates of the marker
    // increase in the X direction to the right and in
    // the Y direction down.
    var image = {
        url: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS4nrG_9A9UvPv4r32g14HE7CHgF1i9TRDFCwN43rLeA_-Ir4wX5g',
        // This marker is 20 pixels wide by 32 pixels tall.
        size: new google.maps.Size(20, 32),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0, 0),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(0, 32)
    };
    // Shapes define the clickable region of the icon.
    // The type defines an HTML &lt;area&gt; element...