Create your first map

Gag

Since karma has ceased to be at zero (thanks to the one who voted), I decided to make several cross posts from my blog , where I translated tutorials on the Google Maps API. <P />

Targets and goals

This tutorial will lead you to creating your first working map using the Google Maps API. The manual also covers the process of publishing a map on the Web using Google Pages and customizing the map so that it displays the area you selected, with markers and info-windows located on it.

Study time

About 60 minutes.

The necessary conditions

Before you start learning this material, you should have:

• Gmail account ;
• Basic knowledge of HTML;
• Basic knowledge of javascript.

Content

This manual is divided into the following paragraphs:

1. Setting up an account on Google Pages;
2. Getting a working card;
3. Finding the Latitude / Longitude of your area;
4. Card setup;
5. Summarizing.

Setting up an account on Google Pages

In order to publish your map on the web, we will use Google Pages. You can also use any other server to store your (your) cards. If you are already familiar with Google Pages or use your own server, you can safely skip this paragraph and move on to the next.

1. Visit http://pages.google.com under your GMail login. If you are using Google Pages for the first time, you will be redirected to a page with a description and terms of service. Please read and accept these terms.
   
   
2. After that you will see an interface with which you can create a new page. Besides the fact that Google Pages provides a convenient WYSIWYG HTML editor, you can also download a ready-made page from your hard drive. We’ll use the download option for pages created outside of Google Pages. Us on the Edit page, click 'Back to Site Manager' - the Site Manager page will appear.
   
   
3. Now you should see the site manager interface. It consists of pages created in the editor, which is on the left; the page loading menu, which is on the right and the URL of your site, which is at the top of the page. Leave this page open in your browser - we will need it later.
   
   

Get a working card

1. To embed a Google map into a website, you must obtain a special API key that is associated with the address of your website and the Gmail account. First, visit http://www.google.com/apis/maps/signup.html . Be sure to understand the conditions of use of the service.
2. Enter the URL of your site in the 'My Web Site URL' field. Check the box that you agree to the terms of use and click on the button 'Generate API Key' .
   
   
3. Now you should see a page with gratitude for registration, on which are: your API-key (a long sequence of arbitrary characters), the address of the domain for which the received key will be correct and the code of a simple card. You can see that the resulting key for the API is appended to the end of the tag code responsible for the map loading script. Leave this page open in a browser window.
   
   
4. Start a text editor. For example, Notepad. (I advise Notepad ++.) Copy the HTML code from the page with the key and paste it into a clean document editor. Save this file as mymap.html .
   
   
5. Return to the Google Pages manager page that we opened in step 4 of paragraph 1. Click the 'upload' link, located at the bottom of the page load menu. Click on the 'Browse' button, find and select the file mymap.html .
   
   
6. As soon as the file is uploaded to the server, you will see the recycle bin icon next to the file name and the size of this file.
   
   
7. It's time to test your card! Click the 'mymap.html' link in the file upload menu. You should see a browser window where your map will be. If all steps were completed correctly, then you will see a map with the center in Polo Alto, California, the same as this one:
   
   http://maps.examples.googlepages.com/mymap.html .

If you received an error message stating that this key is registered for another site, it means that you entered the wrong URL when subscribing to the key for the API. Go back to step 2 of this paragraph and make sure that you entered the correct website address. If you see just a blank page, then an error probably occurred when copying the HTML code. Go back to step 4 and make sure that the code was copied only from the frame.

')

Finding Latitude / Longitude Your Locations

The first setting of the map that you will spend will be the change of the center of the map to your own (address of home, work, city, etc.). To do this, you need to know the coordinates of the place you want to see as the center of the map. The process of finding coordinates by the address is called geocoding and occurs when you enter a search address on maps.google.com . Google Maps has one of the best geocoding engines, so we will use them to find the necessary coordinates.

1. Go to http://maps.google.com .
   
   
2. Enter the address of your location in the search field and click on the 'Searh Maps' button. If your address has been found, a marker will appear on this place on the map. If several values ​​fall under the search criteria, the engine will ask you about the most appropriate one.
   
   
3. Geocoding is an inaccurate process, so the marker may appear a little in the wrong place: for example, in the middle of a street, on a road, etc. All you need to do is click to the desired place twice and the center of the map will be on it.
   
   
4. As soon as the position of the center of the map becomes satisfactory for you, you can “pick up” the coordinates of this place. To do this, click on the link 'Link To This Page' . Get the URL of the form:
   
   http://maps.google.com/maps?f=q&hl=en&q=3650+McClintock+Ave+Los+Angeles+CA&sll=34.019963,-118.290047&sspn=0.00482.0.006856&ie=UTF8&ll=34.019968 ,-118.289988&spn=01.006 , 0.001714 & t = k & z = 19 & om = 1 .
   
   
5. Consider this clever URL. We need to find the parameter ll and copy the two values ​​after it. This will be the latitude and longitude. They need to be written somewhere. You can also memorize the zoom level of the map: the parameter z is responsible for it. Attention: for each zone of the map its own level of detail is used, which may be inoperative for other areas.

Customize the map

Get ready to program! In this section we will change the code of our file with the map, based on your preferences. Once you have made changes to the code, you should return to steps 5-8 of paragraph 2.

1. So, mymap.html file should be open in a text editor.
2. Add the following line of code using the coordinates obtained in paragraph 3:

   map.setCenter ( new GLatLng (37.256, 118.652), 13);

   The setCenter() method sets the center of the map using the GLatLng() class, as well as the zoom level. The smallest value of the zoom card is 0 - the whole world is visible. Reload the page to the server and check its operation.
3. Now we will add a code that changes the map type: normal map, satellite image, mixed type. The default is the normal display type. For changing the type of card correspond to the three buttons in the upper right corner. At http://maps.google.com, you can see the differences between these three types. The method that changes the map type is called setMapType() , and the line of code looks like this and it is added after the line that sets the center of the map:
   
   

   map.setMapType(G_NORMAL_MAP);
   map.setMapType(G_SATELLITE_MAP);
   map.setMapType(G_HYBRID_MAP);

4. Create a marker in the center of your map. The code that creates the token is:

   var marker = new GMarker ( new GLatLng (37.256, 118.652));

   And the code that puts this marker on the map:

   map.addOverlay (marker);

   As you probably already guessed, the GMarker() class is responsible for creating the marker, and the addOverlay() method is addOverlay() for adding the marker to the map.
5. Now create an info-window (“bubble” with text) that will appear above the marker, and add some information about the location of the marker to it. Here is the code responsible for this:

   var html = "<img src = 'simplemap_logo.jpg'" + "width = 128 'height = '41' /> <br/>" + "USC GamePipe Lab <br/>" + "3650 McClintock Ave, Los Angeles CA " ;
   
   marker.openInfoWindowHtml (html);

   As you can see from the example, any HTML code can be inserted into the info-window. Double quotes should be escaped using the backslash: "\"" . If you want to add an image to the info window, adjust its dimensions (images). And it’s responsible for adding the info window to the openInfoWindow() method.
6. Add map controls. The addControl() method is responsible for this. Here are some elements whose installation code should be added somewhere after installing the center of the map:
   
   

   map.addControl(new GSmallMapControl());
   map.addControl(new GLargeMapControl());
   map.addControl(new GSmallZoomControl());
   map.addControl(new GScaleControl());
   map.addControl(new GMapTypeControl());
   map.addControl(new GOverviewMapControl());

7. By changing the HTML code, you can change the size of the map. To do this, you need to edit the properties of the container that contains the map. For example:

   < div id = ” map ” style = ” width: 800px ; height: 800px ; " > </ div >

Summarizing

Congratulations, you have passed the material and created your first map based on the Google Maps API! To make it more functional, refer to the documentation . If you have questions, ask them on the forum .