JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://maps.google.com/maps/api/js">
</script>
<div id="map"></div>

CSS

#map {
  height: 300px;
  width: 250px;
  border: solid;
}

JavaScript

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(0,0),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,

        panControl: true,
        mapTypeControl: false,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: false,
        streetViewControl: false,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);

 var other = new google.maps.LatLng(45.9683128, 8.9172776);


    var Item_1 = new google.maps.LatLng(45.5983128, 8.9172776);

    var myPlace = new google.maps.LatLng(45.4555729, 9.169236);

    var marker = new google.maps.Marker({
        position: Item_1,
        map: map
    });

    var marker = new google.maps.Marker({
        position: myPlace,
        map: map
    });
    
     var marker = new google.maps.Marker({
        position: other,
        map: map
    });

    var bounds = new google.maps.LatLngBounds();
    bounds.extend(myPlace);
    bounds.extend(Item_1);
    bounds.extend(other);
    map.fitBounds(bounds);
    map.panToBounds(bounds); 

}
initialize();