JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<span id="mySel">
    <select id="select" onchange="test();">
    <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
</select>
</span>
<br/>
<div id="googlemap" style="width: 100%; height: 500px;"></div>

JavaScript

var markers = [];
    function initialize() {
        
            var mapOptions = {
                zoom: 10,
                center: new google.maps.LatLng(40.714364, -74.005972),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
    
    
            var locations = [
                ['New York1', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'],
                 ['New York2', 40.71564, -74.15972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'],
                 ['New York3', 40.84364, -74.35972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'],
                 ['New York4', 40.6364, -74.9972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'],
                 ['New York5', 40.2364, -74.172, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
            ];
        
    
            var marker, i;
            var infowindow = new google.maps.InfoWindow();
    
    
            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });
    
    
            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    icon: locations[i][3]
                });
    
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                         map.setZoom(13);
    map.setCenter(marker.getPosition());
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
        
                markers.push(marker);
            }
    
        }
    ...