How to View Google Maps With API Keys
You have the power to create useful map applications that you can view on computers and mobile devices. Google Maps, which you may have seen on the Web, is an online service that developers access through Google's Application Programming Interface. Once you have an idea for your own Map application, you can access this interface and begin learning how to harness the power of Google Maps. All you need is a Web page and a Google Maps API key.
Other People Are Reading
Instructions
-
-
1
Visit the sign-up page for Google Maps API at Code.google.com/apis/maps/signup.html and sign up for an API key. Google Maps will generate a new API key and display it on the Web page. Copy that key.
-
2
Launch an HTML editor and paste the following code into one of your HTML documents:
<body onload="loadMap()">
<h1>My Map Appears Below</h1>
<div id="myMap"></div>This div tag holds the map you generate. Its id value is "myMap." The "onload" function calls a JavaScript function that loads your map when the Web page loads.
-
-
3
Add the following code to the document's head section:
<style type="text/css">
#myMap { height: 400px; width: 400px; }
</style>This CSS selector sets the attributes for the div. The current values make the div 400 pixels high and 400 pixels wide. Change those values to change your map's dimensions.
-
4
Paste the following script tag into the document's head section:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=true">
</script>Replace MY_API_KEY with your API key.
-
5
Paste the following JavaScript code into your document's script section:
function loadMap() {
var latitudeLongitude = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 3,
center: latitudeLongitude,
mapTypeId: google.maps.MapTypeId.ROADMAP
};var map = new google.maps.Map(document.getElementById("myMap"),
mapOptions);}
The loadMap function runs when the page loads.The latitudeLongitude variable holds the latitude and longitude of the location you wish to appear on the map. Those values are 37.970185 and 121.810913 in this example. The zoom value sets the map's zoom level, and the center option centers the map over the location you set in lattitudeLongitude, and the zoom. The code calls the Map function in the final statement to generate the map. That function uses your div and mapOptions variables as its parameters.
-
6
Save your document and open it in a browser to view your map. It will appear just as it does in Google Maps. Click and drag the map to view different locations and drag the sliders to zoom in and out.
-
1
Tips & Warnings
A quick way to find a location's latitude and longitude is to visit Google Maps and search for any location. When the map appears, click the "Link" button to view those values.
The value for mapTypeID is "Roadmap" in this example. Other possible values are Satellite, Hybrid and Terrain. The Hybrid view displays photographic images and roads with street names. Set the value to Terrain to view a physical relief map that shows a location's terrain, such as rivers and mountains.
Higher values for the zoom value cause the browser to zoom in more on your location. Experiment with different values to achieve the desired zoom effect.
References
- Google Code: Google Maps JavaScript API V3 Tutorial - Google Maps JavaScript API V3
- Google Code: Sign Up for the Google Maps API - Google Maps API Family
Resources
- Photo Credit Jupiterimages/Photos.com/Getty Images
