Loading...

Tech Talk Live Blog

Creating a Google Map on a Web Page

Thai Tran


Google Maps is a free web mapping service developed by Google that provides geographical information. It has a JavaScript API to customize the maps and to display them on a web page. As the user drags the map, the grid squares are downloaded from the server and inserted into the web page.

The Google Maps API is free for commercial use, provided that the site on which it is being used is publicly accessible and does not charge for access, and is not generating more than 25,000 map accesses a day.

Google Map with Lancaster-Lebanon IU13 Pinned

Figure 1: This Google map with marker shows an info window for the IU13 location in Lancaster PA.

The first step to embedding a Google map is to add the Google API into your page. All functionalities are provided by a JavaScript library located at Google, so here is the line of code that must be inserted into the page:

<script src=”https://maps.googleapis.com/maps/api/js?key=YOUR KEY”></script>

To obtain the API key, go to https://console.developers.google.com/apis/library.

After logging in, under Google Maps APIs, choose JavaScript API and get the key from that site, then replace “YOUR KEY” in the above script.

On the web page, we will need a container in HTML to hold the map:

<body onload=”loadMap()”>
<div id=”googleMap” style=”width:570px; height:480px;”></div>
</body>

The next step is create function loadMap() in the script, here is the script for map showing IU13 in Lancaster, PA

<script>
var myCenter = new google.maps.LatLng(40.054490, -76.282538);
function loadMap() {
var mapProp = {
center: myCenter,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“googleMap”), mapProp);
}
</script>

Here are some property settings:
. center property: the location where the map centers. Create a LatLng object by adding the latitude and longitudes
. zoom property: specify the zoom level of the map.
. maptypeid property: specify the type of the map. There are four types:

  1. ROADMAP (normal, default 2D map)
  2. SATELLITE (photographic map)
  3. HYBRID (combination of two or more other types)
  4. TERRAIN (map with mountains, rivers, etc.)

To add a marker to the map:

var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);

To add an Event Listener (here we add a window to show the detail info if the marker is clicked):

var infowindow = new google.maps.InfoWindow({
content: “<b>Lancaster-Lebanon IU13</b><br/> 1012 New Holland Ave Lancaster PA 17601”
});

google.maps.event.addListener(marker, ‘click’, function () {
infowindow.open(map, marker);

});

Here is the complete code to create the map in Figure 1:

Code to Create Google Map

Figure 2: Code to create a Google map as shown in Figure 1

References:

https://developers.google.com/maps/documentation/javascript/adding-a-google-map
https://developers.google.com/maps/documentation/embed/get-api-key
https://www.mapsmarker.com/docs/basic-usage/how-google-maps/

Tech Talk Live Blog Comment Guidelines:

One of our main goals at Tech Talk Live is to build a community. It is our hope that this blog can be a forum for discussion around our content. We see commenting as an integral part of this community. It allows everyone to participate, contribute, connect, and share relevant personal experience that adds value to the conversation. Respect counts. We believe you can disagree without being disagreeable. Please refrain from personal attacks, name calling, libel/defamation, hate speech, discriminatory or obscene/profane language, etc. Comments should keep to the topic at hand, and not be promotional or commercial in nature. Please do not link to personal blog posts, websites, or social media accounts that are irrelevant to the conversation. This is considered self-promotion. We welcome links that help further the conversation and reserve the right to delete those we deem unnecessary. The appearance of external links on this site does not constitute official endorsement on behalf of Tech Talk Live or Lancaster-Lebanon Intermediate Unit 13. You are solely responsible for the content that you post – please use your best judgment. We reserve the right to remove posts that do not follow these guidelines.

Leave a Reply

Your email address will not be published. Required fields are marked *

CONTACT

Tech Talk Live is the only conference of its kind in the region specifically designed for IT pros in education.


techtalklive@iu13.org
1020 New Holland Avenue, Lancaster, PA 17601

(717) 606-1770