Bootstrap – Embed a google map into your HTML or Bootstrap Website


Hi Guys this is Jamie from http://www.system22.net and http://www.great-webdesign.com/ here’s a short video showing you how to embed a Google
map onto your HTML or bootstrap website so what if you decide you want to embed
a Google map on your bootstrap site you just go to google put in the search embed Google map it should bring you to this page and if
we go down to QuickStart build a map it will take this page here and this is
where we want to build our map so we want to put our location in this box
here just for demonstration purposes let’s put in the white house okay that looks correct so if it looks
good if it looks good button now we’re going to need an API key so
what we need to do is register which will open a new window you need to be
signed into your Google account or if you don’t have one just create one it’s
very easy and let’s go to get API key and click on the get a key BAM now we can create a new project or use
one the repo so just for white house and whatever you want to call it create and enable API you and there’s our API key you can click on
that icon that will copy it for you or you can select it and copy it however
you prefer when you’re done just hit the finish key point wanna copy and paste
that into a notepad so you’ve got it if we go back to our previous pad now we
can put our API key in here so when you’re done just hit the done
button and it gives us the code that we want to copy into our website here so if
we select that and copy it now let’s take a look at our website and scroll down decide where we want to
put the map put it just above the contact section
between the contact section and a blog section of course it’s entirely up to
you but that’s where I’ll predict sure this demo
so if we open our index.html and just show you what I’m doing here our index.html file with our bracket
software text editor and brackets is a free download from
brackets dot IO go down to a contact stretch well we’re
already here and here’s the end of our blog section
so I’m going to create a new section you and let’s give it your idea of man you it doesn’t matter you don’t have to give
it an ID because we’re not going to be scrolling to it or using it with the CSS
but it’s not a bad idea to give your section the name just so you know they
are when we need to find them and I’ll give it a title there just to make
finding it a little easier for anybody that needs to dig in this code
afterwards okay so if we just put a little space
there and go back to our Google map code now we’ll copy this and back to our
brackets we’ll paste it in there and we’ll do a quick seed let’s have a
look at that go back to our site and do a refresh there’s our map now that’s not quite
looking like we’d like to see it I like it to be stretched full-width
that’s real easy to tweak here we go back to our brackets here’s the code we
just put in where it says width 600 I’m going to put which 100% and height you can adjust the height as
well if you want the defaults for 50 let’s just do that for example let’s
let’s make it 550 I’ll make it a little wider and a quick saved and back to our
site and do a quick refresh there we have it and it’s a live
interactive map you can get directions and everything you need so there’s our nice full-width map
embedded in our site there that’s responsive to to work fine on cell phone
or tablet smaller devices what I kind of like to do is just get rid of that bit
of padding on it at the bottom there so that is sitting on the top of here very
easy to do if we go back to our brackets you can either put this in your CSS
stylesheet and give it the idea of map I’ll just put it like here in line okay padding-bottom and we want that with zero pixels quick
thing now refresh our site there we go and that’s sitting down
nicely on the top of our little contact section there
so there you have it that is how to embed a Google map into your bootstrap
or HTML website I hope that’s been useful to you thank you very much for
watching have a great day

12 Comments

Add a Comment

Your email address will not be published. Required fields are marked *