CODEWITHSUNDEEP
google-mapstwitter-bootstrap
Daniel J. Bertelsen
Daniel J. Bertelsen

Reputation: 91

How to change coordinates in Google map API in Bootstrap template theme?

I have tried, but without any luck. Bootstrap provides this really awesome theme called Stylish Portfolio (http://startbootstrap.com/stylish-portfolio) which comes with a cool Google-map location. This is a fairly standard thing nowadays. However, I need to change the location of the map to match Copenhagen in Denmark. I've tried to look up other ressources/help/support from the template creators, bot cant seem to find anything on the map coordinates - which is why I'm here at SO now.

I've been looking through the html, and this seems to be the code for the map?

<!-- 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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A&amp;output=embed"></iframe>
    <br />
    <small>
        <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A"></a>
    </small>
    </iframe>
</div>
<!-- /Map -->

Clearly, it's not just a simple google-maps link/coordinates - can somebody help explaining to me, what I'm actually looking at here?

Thanks in advance

Upvotes: 1

Views: 4488

Answers (1)

BigDropGR
BigDropGR

Reputation: 345

The solution to your problem is quite easy...

Follow these steps:

  1. Go to https://developers.google.com/maps/documentation/embed/start
  2. Search for business or place (where it says "Highlight a place or an address") then click "Looks Good!".
  3. 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

  1. After you ender your API key click "DONE"

  2. Copy And Paste the code you'll get to your templates index.html and you're done.

  3. Change the height and width to 100% (where is says

That's all!

Upvotes: 1

Related Questions