Google Maps Basic
How to get up and running with the Google Maps API as quickly as possible. The Google Maps API is fun and easy to use, and I hope that by the end of this article, you’ll be as excited about putting Maps on the web as I am.
Who created google maps?
Lars Rasmussen is the head of engineering at Google Maps Sydney. In 2003 Lars and his brother Jens formed a mapping technology company named (Where 2 Technologies). A year later it was acquired by Google and Google Maps was born.
What is google maps?
A way of organizing the world’s information geographically. Google Maps is a web mapping service developed by Google. It offers satellite imagery, street maps, 360° panoramic views of streets (Street View), real-time traffic conditions (Google Traffic), and route planning for traveling by foot, car, bicycle, or public transportation. This data is what makes Google Maps so special, and only a company like Google has the resources to deal with the huge amounts of data that Google Maps relies upon.
Why use Google Maps?
Google Maps is now one of Google’s core asset. The company that started off with a mission to make every corner of the internet searchable has now expanded its mission to make the physical world searchable too. Most website and applications use location and maps and there is a few options like Bing maps or apple maps.
What about the API?
When Google Maps came on the scene in 2005, programmers were on in an instant reverse engineering it to create ingenious mashups like the Chicago Crime Map and HousingMaps.com.
Google responded by releasing the first version of its API, or application programming interface, making it easy for anyone to embed Google Maps in their Web pages using simple, familiar JavaScript.
The Google Maps API comes with a number of classes that allow you to create maps, add points of interest and polylines to a map, specify various map controls, display InfoWindows, read XML files, and much, much more.
The API provides a framework, and what you do with it is entirely up to you. Check out the developers google maps demo site.
How much does it cost to use Google Maps?
Nothing at all if you stay within certain usage limits.
What do you need to start developing Google Maps applications?
A text editor, browser, Acquire a Google Maps API key and web server (Use a local web server). Windows users might prefer IIS and Mac users already have a patch installed.
What do you need to know?
Basic HTML, CSS, Javascript.
How to Get API Key?
To use the Google Maps JavaScript API, you must register your app project on the Google API Console and get a Google API key which you can add to your app.
This is just a unique collection of letters and numbers that identifies you to Google as the author of your Maps API applications. You can monitor your application usage and also allows Google to contact you if you exceed their free usage quota.
Key restriction
To prevent unauthorized use and quota theft, restrict your key. Key restriction lets you specify which web sites, IP addresses, or apps can use this key.
Add the API key to your application to create a Simple Map
When loading the Google Maps JavaScript API, substitute YOUR_API_KEY in the code below with the API key you got from the previous step.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>Example:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.770650, lng: -0.454062},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>Even in this simple example, there are a few things to note:
- We declare the application as HTML5 using the
<!DOCTYPE html>declaration. - We create a
divelement named "map" to hold the Map. - We define a JavasScript function that creates a map in the
div. - We load the Maps JavaScript API using a
scripttag.
These steps are explained here.
The Map Object
map = new google.maps.Map(document.getElementById("map"), {...});Map Options
There are two required options for every map: center and zoom.
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});Basic Map Types
There are four types of maps available within the Google Maps JavaScript API. In addition to the familiar “painted” road map tiles, the Maps JavaScript API also supports other maps types.
The following map types are available in the Maps JavaScript API:
roadmapdisplays the default road map view. This is the default map type.satellitedisplays Google Earth satellite imageshybriddisplays a mixture of normal and satellite viewsterraindisplays a physical map based on terrain information.
You modify the map type in use by the Map by setting its mapTypeId property, either within the constructor via setting its Map options object, or by calling the map's setMapTypeId() method. The mapTypeID property defaults to roadmap.
Setting the mapTypeId upon construction:
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);Modifying the mapTypeId dynamically:
map.setMapTypeId('terrain');Note that you don’t actually set the map’s map type directly, but instead set its mapTypeId to reference a MapType using an identifier. The Maps JavaScript API uses a map type registry, explained below, to manage these references.
