Welcome!

Machine Learning Authors: Zakia Bouachraoui, Liz McMillan, Roger Strukhoff, Pat Romanski, Carmen Gonzalez

Related Topics: Machine Learning

Machine Learning : Article

How to Add a Google Map to Any Web Page in Less than 10 Minutes

Joshua Siler's Invaluable How-To Guide

Most people really like the embedded Google Maps, but don't know how easy it is to add them to any page. I've had a few people ask me how it is done. With a little bit of HTML knowledge, anyone can quickly have a map up and running in just a few minutes.

Here is an example of how you can add a map to any contact us page or blog quickly and easily.

First you need a Google Maps API key, which is free. You can find it, along with other documentation, at http://www.google.com/apis/maps/. Bookmark this link - it has lots of details you might want, especially if you extend your new map beyond this example.

Follow the instructions to "Sign up for a google API key". You'll need a gmail account, and to enter your domain name. This key can then only be used on pages served from that domain name. If you are going to develop on a different server, then you might want to get 2 keys - one for your development server, and then one to switch over to when you publish it to your site. (In Exploration Age, we have several keys that are automatically selected based on which environment the code is running in)

Along with your key, Google will give you a bit of starter code that looks something like this. (note some lines that shouldn't be wrapped like they are here due to space limitations. Make sure your SCRIPT tags are all on one line.)

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://maps.google.com/maps?file=api&v=1&key=
[YOURKEY]" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
    
    //]]>
    </script>
  </body>
</html>


You'll have a different key string in the SCRIPT tag, generated by Google to match your domain name. In order to add a map to your site, all you have to do is cut and paste the right pieces of code from the Google example. First off,

    <script src="http://maps.google.com/maps?file=api&v=1&key=
[YOURKEY]" type="text/javascript"></script>


This script include does 2 things. First, it links in the javascript you need to run the map, and second, it let's Google know who you are with the embedded key. Add this SCRIPT tag somewhere on your page (above the other code below.)

Next, you'll see this div:

<div id="map" style="width: 500px; height: 400px"></div>


This is actually where the map will appear on the screen. Put this div whereever on your page you want the map to show up. Be sure to update the width and height styles to match how big of a map you want on the page. Finally, you see this javascript:

<script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
    
    //]]>
    </script>


Google's code is a little flaky in Internet Explorer, so make this quick modification to the code so it will work better. Essentially, it allows everything to load before trying to draw the map (and might save you some IE crashes)

<script type="text/javascript">
    //<![CDATA[
    window.onload = showMap;
    function showMap()
{
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
    }
    //]]>
    </script>


This is the code that actually draws the map. Place this in your XHTML anywhere after the map DIV. The first line instantiates the map and assigns it to the map div. The second line adds the little pan and zoom controls. Finally, the third line centers the map on a point and sets the zoom level. Now you'll have a map, but it's pointing at the Google headquarters in Palo Alto! How do we get coordinates and point the map at where we want? Even better, how do we get one of those little Pins on the map?

Map data ©2005 Tele Atlas - Terms of Use


Piece of cake. First, you need to find the latitude and longitude of the place you want on the map. We'll use Google. Go to http://maps.google.com and use the pan, zoom and search functions to find what you want to link to. Once you've found it, double click right on the spot to center the map there. Finally, click on "link to this page", and take a close look at the URL. When I look at Powell Butte Park, I get this url

http://maps.google.com/?ll=45.484206,-122.499447&spn=0.031833,0.069523

Luckily for us, it contains the latitude and longitude (see the ll=45.48... line? That is the coordinates). Now, we just have to enter those coordinates in our script to get our map centered on the same spot. Modify the map.centerAndZoom line with your new coords. Like so:

    map.centerAndZoom(new GPoint(-122.499447, 45.484206), 8);


Now your map will point at the new coordinate. Also, you can play around with the last number (4) to change the zoom level, try 8 like the example above.

Map data ©2005 Tele Atlas - Terms of Use


Finally, we can add a point by adding one line of javascript right after the map.centerAndZoom command.

	map.addOverlay(new GMarker(new GPoint(-122.499447, 45.484206)));


Notice we use the same coordinates as the map.centerAndZoom command.

Map data ©2005 Tele Atlas - Terms of Use



Viola!! You have your very own, fully interactive Google map. If you want to get fancy, study the API documentation to learn about the other features already built in. Check out Exploration Age for ideas - you can see how we added custom icons and multiple points.

[This how-to guide appeared originally at the Exploration Age web site. Republished by kind permission of Joshua Siler and Kinetic Theory, Inc., http://kinetictheoryinc.com]

More Stories By Joshua Siler

Joshua Siler is Partner/Strategic Director of Kinetic Theory, an agency specializing in Interactive Web Development, Site and Interface Design, and Strategic Marketing. (www.kinetictheoryinc.com)

Comments (1)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


CloudEXPO Stories
The precious oil is extracted from the seeds of prickly pear cactus plant. After taking out the seeds from the fruits, they are adequately dried and then cold pressed to obtain the oil. Indeed, the prickly seed oil is quite expensive. Well, that is understandable when you consider the fact that the seeds are really tiny and each seed contain only about 5% of oil in it at most, plus the seeds are usually handpicked from the fruits. This means it will take tons of these seeds to produce just one bottle of the oil for commercial purpose. But from its medical properties to its culinary importance, skin lightening, moisturizing, and protection abilities, down to its extraordinary hair care properties, prickly seed oil has got lots of excellent rewards for anyone who pays the price.
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected path for IoT innovators to scale globally, and the smartest path to cross-device synergy in an instrumented, connected world.
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
ScaleMP is presenting at CloudEXPO 2019, held June 24-26 in Santa Clara, and we’d love to see you there. At the conference, we’ll demonstrate how ScaleMP is solving one of the most vexing challenges for cloud — memory cost and limit of scale — and how our innovative vSMP MemoryONE solution provides affordable larger server memory for the private and public cloud. Please visit us at Booth No. 519 to connect with our experts and learn more about vSMP MemoryONE and how it is already serving some of the world’s largest data centers. Click here to schedule a meeting with our experts and executives.
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, virtualized, and cloud, through to IoT and industrial control systems. Installed as a self-configuring cyber defense platform, Darktrace continuously learns what is ‘normal' for all devices and users, updating its understanding as the environment changes.