Add Google Map Location To Your Site

Submitted by: 
Language: 
Visitors have accessed this post 498 times.

Getting Started

Since we are dealing with google map, please make sure you have internet connection for this app to work.

You may visit the Google Documentation for this app using this link.

The HTML

First, this is our html with the javascript for this app.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6. </head>
  7. <body>
  8. <div" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  9. ...</a> class="container">
  10. <div class="row">
  11. <div class="col-md-8 col-md-offset-2">
  12. <h3 class="text-center page-header">Google Map Location</h3>
  13. <div id="map" style="height: 400px; width: 100%;"></div>
  14. </div>
  15. </div>
  16. </div>
  17. <script>
  18. function initMap() {
  19. var location = {lat:9.672948000000002, lng:123.87300219999997};
  20. var map = new google.maps.Map(document.getElementById('map'), {
  21. zoom: 4,
  22. center: location
  23. });
  24. var marker = new google.maps.Marker({
  25. position: location,
  26. map: map
  27. });
  28. }
  29. </script>
  30. <script async defer src="<a href="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1bF3Ry-gVyKmSVse4s1zmfnyd4_9b3F8&callback=initMap"></script>
  31. </body>
  32. </html>

" rel="nofollow">https://maps.googleapis.com/maps/api/js?key=AIzaSyA1bF3Ry-gVyKmSVse4s1zm...

Setting up our Location

As you can see in out script, there's a variable location which contains the latitude and longitude of our location.

Edit the value of this variable by your location's latitude and longitude. You can refer to this link for altitude and longitude.

Make sure to get the decimal value of your latitude and longitude.

Creating and Enabling our API

Next, we're going to get our own API and change the value of our KEY in our script.

API key

1. Visit Google API Console.

2. Create or Select a Project.

3. Click Library and search for Google Maps JavaScript API. Enable this by clicking Enable button.

4. Go back to homepage and click Credentials.

5. On the Create credentials dropdown, select API Key. It will then give you your API Key.

6. Copy this key and change the value of key in our script.

Running the App

Run our application and you should have the google map on your site.

Please take note that map load limit is only 25,000 per day if you don't want a billing for this app.

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.