JSFiddle - React, Tailwind, and code Playground

by Helder da Rocha

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
    var addresses = new Array(); 
    addresses[0] = "Zuider IJdijk 44 AMSTERDAM";
    addresses[1] = "Talbotstraat 47 AMSTERDAM";
    addresses[2] = "A10 Li Vbw A2 Re (s) 16,4 AMSTERDAM";
    addresses[3] = "A10 Li Vbw A2 Re (s) AMSTERDAM";
    addresses[4] = "Jan Bertsstraat 38 DIEMEN";
    addresses[5] = "Nieuwendijk 22 AMSTERDAM Cafe/Bar/Rest/Horeca";
    addresses[6] = "Bosrandweg - N231 21,7 AALSMEER";
    addresses[7] = "Tweede Nassaustraat 27 AMSTERDAM";
    addresses[8] = "Clara Meyer-Wichmannstr 54 AMSTERDAM";
    addresses[9] = "Anfieldroad 228 AMSTERDAM";
</script>
<div id="map-canvas"></div>

CSS

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

JavaScript

var address = addresses[0];

function initialize()
{
    geocoder = new google.maps.Geocoder();
    var myLatlng = new google.maps.LatLng(52.37022, 4.89517);
    var mapOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeControl: 		true,
        mapTypeControlOptions:	{style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: 		true,
        mapTypeId: 				google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    if (geocoder)
    {
        geocoder.geocode(
            {
                'address': address
            },

            function(results, status)
            {
                if (status == google.maps.GeocoderStatus.OK)
                {
                    if (status != google.maps.GeocoderStatus.ZERO_RESULTS)
                    {
                        map.setCenter(results[0].geometry.location);
                        var infowindow = new google.maps.InfoWindow(
                            {
                                content: '<b>' + address + '</b>',
                                size: new google.maps.Size(150, 50)
                            });

                        var marker = new google.maps.Marker(
                            {
                                position: results[0].geometry.location,
                                map: map,
                                title:address
                            });

                        google.maps.event.addListener(marker, 'click', function()
                        {
                            infowindow.open(map,marker);
                        });

                    }
                    else
                    {
                        alert('No results found');
                    }
                }
                else
                {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
     ...