As we mentioned earlier in the course, Google updated their Pricing Policy in June 2018 and now an API key is required to use their mapping service without a watermark displayed on the basemap. An API key is a specific string of characters that refers to you as a developer. This is so you can be identified by Google when interacting with API requests.
Part of the reason for wanting to identify you is so they can charge for services – they have a charging model for simple web views, but also for more complex API requests. For most things Google charges per-view or per-use once some limit has been reached. For the full pricing plan see this page. In summary, Google now provide users with $200 in credits each month to use towards developer costs. This equates to approximately 28,000 hits. Google also provide you with a one year free trial and will not charge you unless you enable automatic billing. So, although the likelihood of you being charged is very low, we are not going to ask you to generate an API key for the purposes of this course. However see the following instructions if the greyed out map and watermark are driving you mad. You will not be penalised for using the development version without an API key.
The general layout of the web page can be improved, as the original contains the map and nothing else. The following figure shows a revised version of the first Google Maps example (google_eg1.html):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(53.807767,-1.557428);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<h1>Google Maps Examples</h1>
<p><a href="../index.html">Personal homepage</a></p>
<div id="map_canvas" style="width:300px; height:500px;"></div>
</body>
</html>
There are a number of changes to the original file. Firstly, the STYLE and META tags in the HEAD section have been removed, as we do not want the map to occupy the whole of the window. Other changes to the original file are in bold:
map_canvas DIV have been changed to reduce the map size.../" means "drop down a directory").
This link will only work properly if the target files exists. For your final task, do the following:
You should now have a modified example that is embedded within a page with space for other stuff around it. The map can be panned and zoomed; some controls are included on the map, and it should also respond to double-click events, and to mouse wheel events. The size and type of controls that are included by default depend on the map size. In the above example, the map is relatively small. Try increasing the height and width parameters (in the style parameter of the map_canvas DIV), and you will see that as the map becomes larger so that map controls become more detailed.