How to Create a Multi-Page Google Map
To create a multi-page Google Map, you need to know some basic HTML coding, including how to set up and properly format a barebones HTML document. You'll be hard coding each page with HTML, inserting a different Google Map into each successive page and creating links for the user to go forward or back to view the different maps.
Other People Are Reading
Instructions
-
Create Initial Page
-
1
Launch a text editor program on your computer. Pre-installed ones include Notepad and Wordpad on the Windows operating system.
-
2
Type the lines of code from this step exactly as it appears into the blank document, which creates a basic HTML page structure. Alternatively, you can copy and paste the code. First, highlight the code with your mouse cursor, then press the "Ctrl" + "C" keys simultaneously to copy, go to the document pulled up in the text editor and press the "Ctrl" + "V" keys simultaneously to paste it.
<html>
<head>
</head>
<body>
</body>
</html> -
-
3
Open a Web browser, then go to maps.google.com and search for a location you wish to use in your multi-page map. Click the chainlink icon below the search box and copy the code from the "Paste HTML to Embed in Website" field. To copy, press the "Ctrl" + "C" keys simultaneously.
-
4
Go back to the text editor and paste the Google Maps code between the two "<body>" tags. To paste, press the "Ctrl" + "V" keys simultaneously.
-
5
Find the "</small>" tag in the Google Maps code and begin typing the following code directly before it:
| <a href="map2.html">Next Map</a>
-
6
Click the "File" menu and select the "Save" option. On the next screen, type "map1.html" as the file name and click the "Save" button. You have now created page one of your multi-page map.
Create Successive Pages
-
7
Go to the Google Maps site at maps.google.com, search for a second location by using the search feature and click the chainlink icon again.
-
8
Copy the code from the "Paste HTML to Embed in Website" field and go back to the text editor that has the "map1.html" file open.
-
9
Highlight the Google Maps code between the "<body>" tags and press the "Ctrl" + "V" keys simultaneously to replace the code with the new location.
-
10
Find the "</small>" tag again in the Google Maps code and insert this line of code:
| <a href="map1.html">Previous Map</a> | <a href="map3.html">Next Map</a>
-
11
Go to the "File" menu at the top of the screen, then click the "Save As" option and type "map2.html" as the new file name. This creates the second page of your multi-page Google Maps system.
-
1
Tips & Warnings
If you need more than two pages, then repeat the steps in section two by choosing another location in Google Maps and adding the "Previous Map" and "Next Map" paging system code. Step one of section two outlines how to find a new location and grab its hyperlink while step four of section two details how to add the basic paging system.
When adding the additional code, replace the "href=" value to match the next and previous pages. To replace the value, place your cursor behind the current value and delete it by pressing the "Backspace" key. Then type in the new value, such as "map3.html" or "map4.html," depending on the number of pages you wish to display.
