Add Google Map Location To Your Site

Submitted by: 
nurhodelta_17
Language: 
JavaScript
Visitors have accessed this post 1041 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 :)

  • 1041 reads
Tags: 
Javascript
Google
Google Map
API
API KEY
Google Maps JavaScript API
nurhodelta_17's picture

Article by nurhodelta_17

nurhodelta_17 has submitted 272 source code / articles.

If you like this post, you can follow SourceCodester on Twitter.

Subscribe to SourceCodester feed via RSS or EMAIL to receive instant updates.

Add new comment

More information about text formats

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.