Google Map Code

ADDING A GOOGLE MAP TO
YOUR WEBSITE
By
Rajeev Ranjan



Adding a Google Map to your web page is very easy, once
you've been shown how! That's what we're going to do in this
lesson - we'll go over each step of creating a basic Google
Map using the JavaScript API.

WHAT YOU'LL NEED


You don't need much to create a Google Maps API
webpage:



A text editor. Windows machines generally include Notepad;
Mac OS X comes with TextEdit; Linux machines come with a
variety of applications, including gedit, vim, or KWrite.



A web browser. We heart Google Chrome, but there are
many web browsers available for various platforms: Firefox,
Safari, and Internet Explorer are some of the best-known
options.

TRY IT OUT





The basic HTML page:Because everything on the web is made up of HTML, we'll
start there. The following code creates the simplest of web
pages:

None of this is specific to Google Maps - it's the basis for any
HTML page. Open your text editor and add this code, then
save the file to your desktop as google-maps.html (or any
other filename that ends with .html).



Your Google Map requires a page element in which to appear;
add a div tag to the body with an id attribute of map canvas.
This creates a container that we'll reference later in the
lesson.



Set the width and height of the div element using CSS. By default, a
div has a height of 0, meaning that any map you place inside it won't
be visible. Use a style tag in the head to set the map to any size; in
this case 500 pixels wide and 400 pixels high.



Load the HTML file in a web browser by dragging it from your
desktop into the address bar of your browser. You'll notice that
nothing is displayed - there's nothing in the div yet. If you'd like
to see the div on your page, add a background-color CSS
declaration to your existing <style> tag:



Reloading the page will display a grey box; that's your div.
To bring forth a map, you must add two pieces of JavaScript to
your page. The first loads the Google Maps JavaScript API;
the second creates and configures the map.



LOADING THE API


Load the Google Maps API by adding a <script> tag to the <head>
section of your HTML. This script downloads the code required to
display maps on your page.



Notice that the URL contains a sensor parameter, which is set to false. This
example does not use any GPS device or sensor to detect the user's
location; if you're using any sort of geolocation in your application, this must
be changed to true

CREATE AND CONFIGURE THE MAP


The final piece of code is the JavaScript that creates the map.
The code contains a function to run once the page has
loaded. In this example, and all of the examples in the Maps
API documentation, this function is named initialize.



Add this code immediately after the <script> tag you created
in the last step.

THE GOOGLE.MAPS.MAP OBJECT


The first thing the initialize function needs to do is create a
new Google Maps object:



The Map object constructor takes two arguments:









center is a Google Maps LatLng object that tells the the API where
to center the map.
zoom is a number between 0 (farthest) and 22 that sets the zoom
level of the map.
mapTypeId is used to specify what type of map to use. Your
choices are ROADMAP, SATELLITE, HYBRID, or TERRAIN.

EXECUTING THE JAVASCRIPT FUNCTION


Add an event listener to the window object that will call the
initialize function once the page has loaded. Calling initialize
before the page has finished loading will cause problems, since
the div it's looking for may not have been created yet; this
function waits until the HTML elements on the page have been
created before calling initialize.

THE FINISHED CODE


This is the final code you've put together in this lesson. It:



Creates a div, and gives it a size.



Loads the Google Maps JavaScript API v3.



Creates and displays a Google Map in the div.



Final Full code is in next slide….

Google Map Code

More Related Content

What's hot

Viewers also liked

Similar to Google Map Code

Recently uploaded

Google Map Code