<!DOCTYPE html>

<!-- How to load Google Map in Materialize Modal? -->
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <!--JQuery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

        <!--Google Map-->
        <script src="https://maps.googleapis.com/maps/api/js"></script>

        <!--Materialize-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        
        <!--Script-->
        <script src="script.js"></script>
    </head>
    <body>
      Click here to open the model:&nbsp;
        <a href="#mapmodel" class="modal-trigger blue z-depth-1 waves-effect waves-light btn-floating">
            <i class="red material-icons">location_on</i>
        </a>
        
        <br><br><br>
        map div inside body:
        <div id="googleMap" style="width:500px;height:380px;"></div>

        <div id="mapmodel" class="modal modal-fixed-footer">
            <div class="modal-content">
                <h4>map div inside model:</h4>
                <div id="googleMap2" style="width:500px;height:380px;"></div>
            </div>
            <div class="modal-footer">
                <a href="#" class="red modal-action modal-close waves-effect waves-green btn-flat">Got it</a>
            </div>
        </div>
    </body>
</html>

            function initialize() {
                var mapProp = {
                    center: new google.maps.LatLng(51.508742, -0.120850),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
                var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp);
            }
            google.maps.event.addDomListener(window, 'load', initialize);

            $(document).ready(function () {
              //MAKE SURE YOU CALL .leanModal METHOD THIS WAY.
              //ELSE MODAL MAP WILL NOT SHOW PROPERLY.
                $('.modal-trigger').leanModal({
                    ready: function () {
                        var map2 = document.getElementById("googleMap2");
                        google.maps.event.trigger(map2, 'resize');
                    }
                });
            });
        

/* Styles go here */


This plunk was made to answer a question on stackoverflow.

Question: How to load Google Map in Materialize Modal?
Asked by: nasr18