Displaying a Google Map | JavaScriptSource

Displaying a Google Map

Bradley Jones Jun 19, 2015


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


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:


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>

   #map {

        width:  500px;

        height: 500px;


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

*** 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';

window.onload = loadScript;



Indianapolis Google Map

Leave a Response


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