Displaying a Google Map | JavaScriptSource

Displaying a Google Map

Bradley Jones Jun 19, 2015

Abstract

This script shows a simple Google Map on a Web page.

Description

This script shows a simple Google map on a web page. The map shown is displayed with the Satellite view; however, you can easily change the code to show any of several types of maps including:

  • ROADMAP
  • SATELLITE
  • HYBRID
  • TERRAIN

You can also modify the level at which you zoom into the map as well as the size. All this is relatively straightforward within the code.

Code Snippet

*** HTML CODE ***
<!DOCTYPE html>
<html>
<head>
   <style>

   #map {

        width:  500px;

        height: 500px;

      }
   </style>

</head>
<body>
   <h1>A Google Map</h1>
   <p>Center of downtown in Indianapolis, IN </p>
   <div id="map"></div>
   <script src="js/google-map.js"></script>
</body>
</html>


*** JavaScript code (in attached file) ***
// JavaScript source code
function init() {
    var mapOptions = {
        center: new google.maps.LatLng(39.7685571, -86.1578993, 19),
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        zoom: 18
    };

    var myMap;
    myMap = new google.maps.Map(document.getElementById('map'), mapOptions);
}

function loadScript() {
    var script = document.createElement('script');
    script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false&callback=init';
    document.body.appendChild(script);                 
}

window.onload = loadScript;

Download

Download

Indianapolis Google Map

Leave a Response

(4 comments)

Excellent solution, thanks. When you write (39.7685571, -86.1578993, 19), What does the 19 mean?

Carlos Delgado Apr 29, 2016

Really neat and clean helpful code for the developers

Appz Feb 25, 2016

Thanks, quite helpful.

Bjorn Jonsson Jan 1, 2016

Great work of posting a great and useful information. This code for displaying a google map will definitely gonna help many bloggers and local business that has a physical location.

Ella Barnes Sep 30, 2015