Learn to use Google Map APIs
Using Google Map API – Basic
Using Google Map API – Basic
Most of the mapping applications / software are not free; however, Google offers free maps and allows anyone to use their API. Of course there are other mapping services, such as Yahoo Maps and MapQuest. There are also several costly products, such as MapInfo, But, Google Maps API seems to work for everyone in just about every situation. I’m the developer for ILOVENY’s Summer site (see the attached screen shot) and I used Google Maps for all the maps used on on ILoveNY.com.
For a good example of using color symbols in a website map, look at the Rail Station map I created for the website.
In this article I will show you how to use Google Map API within any HTML page.
Step 1. Create a HTML or .Net page, let’s call it Sample_1
Step 2. Within the HEAD section, enter the below JavaScript line.
Let’s talk about this line for a minute. It uses “src” which is source of the JavaScript which is hosted by Google so we do not have to have this file in our folder. Notice one of the Query String is “file=api”, this tells the JavaScript that we are using Google Maps as API (Application Programming Interface). Step 3. Again within the HEAD section, enter the below script / code. Let’s talk about this code for few seconds. We have a function, named initialize (we can name it anything we want). This function / method is the container of our Google Map code. It is normal that you won't understand this code if you are not a programmer or don't understand HTML, but that is OK, because once you run the application all will make sense. You can always come back to review the code again. Every physical location has coordinates (X and Y) and for BrightHub located in Troy, NY those coordinates are 42.732419,-73.690989. Step 4. Modify the BODY tag of your HTML page to match this, Step 5. Now let’s add a place holder for Google Maps. Add the following code within the BODY tag