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

(3 comments)

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