Put Google Map on your personal website

Possessing a location search tool, online maps such as Google Map on personal websites are a very interesting thing, bringing many advantages to visitors. To put Google Map on a personal website, you don't need to be able to program "super", just a few simple steps and a little knowledge of HTML can do this.

The essential factor to bring Google Map to a website or personal blog is to exploit the API (Application Programming Interface) of Google Map which is provided free of charge by Google to users but with certain limitations.

If you want to use a commercial map or only exploit it on a personal website, you can sign up for a 30-day trial of Google Map Enterprise service. The map will be viewable but it is located behind a firewall or with a registered login account. Enterprise services also provide additional features such as customer relations and marketing support.

In this article, you will only be able to use the free version with two main functions: zooming the map (zoom) or finding a location. The info window of the map has components such as updates, markers, routing lines to indicate .

Step 1 : register using API key (API key) here. However, before you register and receive the API key, you need to log in to your Google account. After logging in, click on "Sign up for a Google Maps API key", enter your personal website domain name and click " Generate API key ". The system will create a key with a fairly long code so you can copy and paste it into the HTML code on your website.

Note that this API key is valid for a single folder on your server. You can use it to embed a Google Map map into any registered domain page without a limit to the number of page views per day.

The system provides API key is a piece of code,
You need to back up for later use.

Step 2 : Copy the example code into a text file, it's best to use notepad to save it. When referencing, you will see most important information in the HEAD tag - / HEAD and a code containing the map in the BODY tag section of the page. The entire HTML code is a map page that can be clicked and dragged on the interface. If you are not familiar with HTML code, you can refer to Google's basic tutorial here with many ways to bring maps to the personal web after obtaining API key.

The basic map page was created after creating the API key

Step 3 : In this step we will begin to make a little correction for our own imprinted map. First you reposition the starting position for the map in the map.setCenter section in the example code provided in the previous step. Just change the coordinates after GLatLng to match the longitude, latitude of the starting point you want to reset.

Google Map has been integrated into the personal website

Finally, add the above code to a website design program like Dreamweaver, note the addition of the script to the HEAD tag and follow the instructions to download the map in the BODY tag section.

Following the instructions above with a little more research, you can add Google Local search tools, integrate optional controls or drive instructions to your personal website. The procedure for adjusting the "flower" for the map will be guided in the next lesson.