How to Embed a Clickable Map

104 66

    Embedding a Map in an HTML Page

    • 1). Create a simple HTML page as you normally would using whatever tool you prefer. If you have a preferred HTML editor, the free Vim text editor comes on all Unix-based systems, such as Linux and Mac OSX. There is an installable version of the tool for Windows. Make sure your HTML is free of errors before moving to the next step, as errors can cause the page to behave strangely. Or worse still, it might fail silently.

    • 2). Navigate on the Internet to maps.google.com and search for a location. Once the location is found by Google, you will be able to select which type of map you want displayed. The options include street view and satellite view. You can also use Google's directions feature to search for a map that includes directions and markers that take the user step-by-step on the driving route.

    • 3). Copy and paste the code in the field marked "Paste HTML" to embed it in the Web site. It is recommended that you paste the code into its own div. This will allow you to control how and where on the page the map is displayed, especially if you are using CSS in conjunction with your pages' HTML to provide your user experience. If you want to change the size of the map, change the numbers of the height and width properties.

    • 4). Open your Web page in a few different Web browsers to make sure that your page works properly. This is important because different Web browsers can potentially display the page differently. Assuming that there are no errors in your code, the map should be displayed properly and you should be able to click it to zoom and move the map's focus.

Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.