Revslider plugin conflict with Map jquery

Hi All,
I am using Revslider 5.1 in one of my client’s website. There are only 5 slides on that website. In one slide I want to create/display address with google map, but unfortunately, whenever I am writing the script, the entire code disappeared from back & the map is showing in blocks.

Site: riggerhouse.com

I am using following Script:

<style type="text/css">
@media only screen and (min-width:1800px) and (max-width:5000px){
            #map {
                width: 1900PX;
                height: 740PX;
            }
}
@media only screen and (min-width:1500px) and (max-width:1899px){
            #map {
                width: 1500PX;
                height: 584PX;
            }
}
@media only screen and (min-width:1200px) and (max-width:1499px){
            #map {
                width: 1200PX;
                height: 467PX;
            }
}
@media only screen and (min-width:900px) and (max-width:1199px){
            #map {
                width: 900PX;
                height: 350PX;
            }
}
@media only screen and (min-width:700px) and (max-width:899px){
            #map {
                width: 700PX;
                height: 273PX;
            }
}
@media only screen and (min-width:500px) and (max-width:699px){
            #map {
                width: 500PX;
                height: 200PX;
            }
}
@media only screen and (min-width:199px) and (max-width:499px){
            #map {
                width: 400PX;
                height: 150PX;
            }
}
        </style>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

        <script type="text/javascript">
            google.maps.event.addDomListener(window, 'load', init);

            function init() {
                var mapOptions = {
                    zoom: 15,
                    center: new google.maps.LatLng(19.115135,72.859335),
                    styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
                };

                var mapElement = document.getElementById('map');

                var map = new google.maps.Map(mapElement, mapOptions);
var flagIcon_front = new google.maps.MarkerImage("http://riggerhouse.com/wp-content/uploads/2016/06/POSITIONING-ICON-29.png");
    flagIcon_front.size = new google.maps.Size(50, 50);
    flagIcon_front.anchor = new google.maps.Point(0, 3);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(19.115135,72.859335),
                    map: map,
     icon: flagIcon_front,
                    title: 'RIGGERHOUSE!'

                });

            }

        </script>

        <div id="map"></div>

Thanks for any help.

Regards,
Gaurav