How to Use the Google Maps API in a Local Development Environment
Google Maps combines satellite images with street and highway information in an interactive format. With the Google Maps Application Programming Interface, or API, you can incorporate maps into personal or commercial websites at no cost with an unlimited number of page views. Google offers custom markers, graphics and many other tools to configure and personalize your maps for almost any application. You can code and test the maps in your local development environment before going live with them on the Internet.
Other People Are Reading
Instructions
-
-
1
Open your Web page in a basic text editor, such as Notepad. Text editors that do text formatting, such as Word, add special characters that don't work well when writing Web pages. Before the opening HTML tag, put a document-type declaration for HTML 5. The declaration should look like <!DOCTYPE html>.
-
2
Enter the following JavaScript code in between the head tags of your Web page. In the parenthesis after "LatLng" are the latitude and longitude values for the center of the map. Change those to the location you want displayed when the map is loaded. The next two parameters are the zoom, which can range from 0 to 20, and the map type. Google supports four map types: ROADMAP, SATELLITE, HYBRID and TERRAIN.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function displayMap() {
var mapOptions = {
center: new google.maps.LatLng(37.6527, -97.3520),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var mapObject = new google.maps.Map(document.getElementById("google_map"), mapOptions);
}
</script>
-
-
3
Change your opening body tag to include an event handler to call the "displayMap" function when the page loads. The body tag should look like <body onload="displayMap()">.
-
4
Enter the following div tags into the HTML wherever you want to display the map. Change the values of the width and height as you see fit.
<div id="google_map" style="width:550px; height:400px"></div>
-
5
Save the HTML file, and double-click on it to open it in your browser. The map should load, displaying the location you specified.
-
1
Tips & Warnings
Version 3 of Google Maps doesn't use an API key, which is a code you have to get from Google for Version 2 when using Google Maps online. Google has deprecated Version 2, so now there is no difference between going live and using Google Maps within a local development environment.
References
Resources
- Photo Credit Ryan McVay/Digital Vision/Getty Images
