Bootstrap and iFrame google map - google-maps

Question

I've used a Bootstrap template ("Stylish Portfolio" - http://startbootstrap.com/stylish-portfolio ) to make a simple portfolio page for a friend of mine.
I should say, that I enjoy to do coding in my spare time, and I am as such not a professional in any way, so I apologize for my newbieness! :-)
Anyway, can't figure out how to change the location of the iframe google map which is embedded in the template's html.
As default it is set to locate Twitters HQ. But that's not really what I want.
I need it to just show Philadelphia on the map, but I simply cant get it to work!
To be more specific, this is the exact view the map need to provide:
https://www.google.com/maps/place/Philadelphia,+PA/#40.002498,-75.1180329,11z/data=!3m1!4b1!4m2!3m1!1s0x89c6b7d8d4b54beb:0x89f514d88c3e58c1
When I look at the html code for the map, I have this:
<!-- Map -->
<div id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
</small>
</iframe>
</div>
<!-- /Map -->
That's all.
I really could use some assistance here since what I first thought was coordinates, aren't in fact that. But I have no idea how to change the location of the map! Or the small box with the current Twitter information.
Anybody who has any experience with this?

Answer 1

Change iframe with this one,
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d195601.04562769792!2d-75.11803295!3d40.002497999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1401521095201" width="100%" height="100%" frameborder="0" style="border:0"></iframe>

Answer 2

The solution to your problem is quite easy...
Follow these steps:
Go to https://developers.google.com/maps/documentation/embed/start
Search for business or place (where it says "Highlight a place or an address") then click "Looks Good!".
Enter your API key, if you dont have an API key follow the istractions bellow and create one (API key), if you have an API key skip steps 3.1, 3.1.1, 3.1.2., 3.1.3., 3.1.4.,
3.1 Creating the API key
3.1.1. Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
3.1.2.Click the Services link from the left-hand menu.
3.1.3.Activate the Google Maps Embed API service.
3.1.4.Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.
Your API key looks something like this: AIzaSyCwI3k7JC29_KzlX1S_bC8fARpocLX5bRY
After you ender your API key click "DONE"
Copy And Paste the code you'll get to your templates index.html and you're done.
Change the height and width to 100% (where is says
That's all!

Answer 3

Here is the code
<iframe width="100%" height="80%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/place/Philadelphia,+PA/#40.002498,-75.1180329,11z/data=!3m1!4b1!4m2!3m1!1s0x89c6b7d8d4b54beb:0x89f514d88c3e58c1"></iframe>