how to make google map embed iframe responsive with bootstrap

Channel:
Australia Magic Monk
Subscribers:
64,099
Published on ● Video Link: https://www.youtube.com/watch?v=jOETg5zcnuo


Category:
Tutorial
Duration: 11:50
21,952 views
128

I tried to embed a google map onto my page but with the default code provided by google, the map has a fixed width which does not change when you resize the window or view it on mobile. This makes it very difficult to view on mobile as you will have to zoom in and out a lot with your fingers. So I found a way to fix it with bootstrap - making the map change its width according to window size. It also will look nicely on your phone. Check it out.
The code for this tutorial is at:
http://magicmonktutorials.com/travel/korea-responsive-tutorial.html



Other Videos By Magic Monk


2017-06-02Surveying Maths A lesson 2 - use sine to find the area of a triangle given 2 sides and an angle
2017-06-02Surveying Maths A lesson 1 - finding the height and area of an isosceles triangle
2017-05-01Magic Monk goes to Korea episode 1 - Seoul
2017-04-30Which is the best prepaid mobile sim card plan for foreigners travelling to Korea
2017-04-30How much time do you need to transfer planes in Taipei airport between terminal 1 and 2
2017-04-30The most spacious seat in the economy cabin on an airplane that people don't know about
2017-04-24Upgrade Visual Studio 2015 to 2017
2017-04-06Surprisingly useful Park exercise equipment found in Korea
2017-03-31Can't close a Chrome window tab that keeps popping up dialogue box virus hard drive failure
2017-03-30Where to buy Korean power plug adapter in Australia
2017-03-30how to make google map embed iframe responsive with bootstrap
2017-03-20Differentiating and Integrating Exponential Functions
2017-03-20Free Live Stream Math Tutoring - differentiation, integration, trigonometry
2017-03-18The difference between indefinite and definite integrals
2017-03-18Finding the constant c in the integral
2017-03-18How to draw a tangent or normal line on a sine curve
2017-03-11Android Memo app text too small fix (Samsung Galaxy Tab A)
2017-03-10How to avoid getting distracted by Facebook during exam time
2017-03-02How to export list of dates for recurring calendar meetings / appointments from MS Outlook to Excel
2017-02-20Why are there two different Compound Interest formulas?
2017-02-19Intel Compute Stick screen edges cut off Overscan fix Kogan LED 55 inch TV


Tags:
responsive iframe
responsive google map embed