gmap-api.html

<div class="image">
    <!--<img src="images/map.png" alt="" />-->
    <style>
        #map {
            height: 100%;
            width: 100%;
        }

        @media (max-width: 767px) {
            #map, 
            .image { 
                height: 40vh !important; 
            }
        }
    </style>

    <div id="map"></div>
    <script> 
        function initialize() { 
            var myOptions = {
                zoom: 3,
                center: new google.maps.LatLng(0, 0),
                disableDefaultUI: true,
                scrollwheel: false,
            }
            var map = new google.maps.Map(
                document.getElementById("map"),
                myOptions
            );
            setMarkers(map, hearts);
        }

        var hearts = [
            ['exeter', 50.7244773, -3.5485669, 2],
            ['silva', 37.1761669, -90.4659144, 1] 
        ];

        function setMarkers(map, locations) { 
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < locations.length; i++) {
                var heart = locations[i];
                var myLatLng = new google.maps.LatLng(heart[1], heart[2]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    //shadow: shadow,
                    icon: {
                        url: 'images/heart.png', // Icons made by Madebyoliver http://www.flaticon.com/authors/madebyoliver 

                        size: new google.maps.Size(40, 40),
                        scaledSize: new google.maps.Size(40, 40),
                        // 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(18, 40)
                      }, 
                    title: heart[0],
                    zIndex: heart[3]
                });
                bounds.extend(myLatLng);
            }
            map.fitBounds(bounds);
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA41huE7Bv9e1kctsO1VppZujprfIWFzfw&callback=initialize">
    </script>

</div>