Hope that helps someone else in the future. Learn more about the w-100 class in the Sizing Utilities documentation. Step 2 Building an Example Map Component Now, you can create the custom map component: npx angular/cli generate component MyAgmExample -flat true -inlineStyle true -inlineTemplate true This will create a new MyAgmExample component in the src/app directory without a separate CSS file or HTML template file. You should also delete the fix height & width that Google adds to Map embeds by default. w-100 to the iframe element in order to make sure that your Google Map embeds are fully responsive. That means following - each time you click somewhere else (other links or tabs) and back to map tab, it will reload that map (and therefor may be slow a bit - depends on internet), but at least I got map, not empty gray image of google maps. Google Map in Bootstrap grid You have to add class. I was like - seriously!?įinally, I came up with solution: on that specific tab click (by id, I recommend), it makes all the necessary things. I managed to make it work on FIRST time tab click by using link ID not href comparision, but as soon as I clicked on another tab and back again, gray map again. Map = new (document.getElementById("map_canvas"), myOptions) In earlier projects I'd been able to display maps in tabs using the resize function- but it doesn't seem to work with Bootstrap. I am dumping the map object to console.dir and it has been initialized properly. I built a fiddle taken directly from the Bootstrap docs, with the Gmap script pretty much exactly like Google recommends doing it too. I'm trying to get a Google Map to appear in a vanilla Bootstrap tab.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |