Cerate Responsive Map on Web

<style>
            .google-maps {
                position: relative;
                padding-bottom: 35%;
                height: 0;
                overflow: hidden;
            }

                .google-maps iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100% !important;
                    height: 90% !important;
                }
        </style>

        <div class="google-maps">

            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.234829846082!2d-12.9254090000003!3d37.54953079999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fc09a8c2e3fdb%3A0x9b2d61bcc663088f!2s!5e0!3m2!1sen!2sus!4v1439237247915" width="600" height="450" frameborder="0" style="border: 0" allowfullscreen></iframe>



        </div>