Custom Google Maps not showing on mobile and tablets

by justamir

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div class="wrapper">
    <div id="maps-canvas"></div>
    <div class="clearfix"></div>
</div>

CSS

.wrapper {
    overflow: hidden;
    height: 400px;
}

#maps-canvas {
    width: 100%;
    height: 100%;
}

JavaScript

$(window).bind("load", function () {
    if ($('#maps-canvas').length) {
        CustomGoogleMaps();
    }
});

function CustomGoogleMaps() {
    // Creating a LatLng object containing the coordinate for the center of the map
    var latlng = new google.maps.LatLng(52.370216, 4.895168);

    var map = new google.maps.Map(document.getElementById('maps-canvas'), {
        //options
        zoom: 18, // This number can be set to define the initial zoom level of the map
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP, // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN

        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.LEFT_BOTTOM
        },

        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
        }
    });

    // Detect the resize event and keep marker in center when on resize
    google.maps.event.addDomListener(window, "resize", function () {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });

    // Define Marker properties
    var imagePath = "http://google-maps-icons.googlecode.com/files/sailboat-tourism.png";
    var image = new google.maps.MarkerImage(imagePath,
        // This marker is 75 pixels wide by 101 pixels tall.
        new google.maps.Size(75, 101),
        // The origin for this image is 0,0.
        new google.maps.Point(0, 0),
        // The anchor for this image is the base of the flagpole at 18,101.
        new google.maps.Point(18, 101)
    );

    // Add Marker
    var marker1 = new google.maps.Marker({
        position: new google.maps.LatLng(52.370216, 4.895168),
        map: map,
        icon: image, // This path is the custom pin to be shown. Remove this line and the proceeding comma to use...