Google Maps on an HTML website

Posted on 2006-11-05
Medium Priority
Last Modified: 2013-12-16
I run a real estate enthusiast website and I would like to encorporate / embed Google Maps onto my site. I have found several real estate agents websites offer Google Maps with their own symbols directing viewers to their personal listings. Even clicking on a symbol would pop up a picture and small description of the property, right on the map.

Please check this webpage for a specific idea of what I am looking for exactly.


Notice the little "house" symbols indicate where this specific real estate agent has listings and has sold properties.

Can you tell me how to do this? Thanks.
Question by:4913Horstman
  • 3
  • 2
LVL 19

Expert Comment

ID: 17878864
If you have no programming experience then that's a tough question to answer.  If you do have programming experience, then Google's manual ( http://www.google.com/apis/maps/ ) turns out to be pretty useful.  It's imperfect, but it does contain enough examples to get started on positioning "pins" and then changing them to look the way you want.

Author Comment

ID: 17878945
I have a intermediate knowledge of HTML web design. But I did as you said and got the initial HTML code with an activation key.

I plugged it into Frontpage and in the preview it comes up blank. I don't see where in the code I can add a specific map to it, let alone add symbols to the map.

Idea's? Thanks.
LVL 19

Expert Comment

ID: 17878980
Try starting from the most simple example in their documentation: http://www.google.com/apis/maps/documentation/simple.html

If you download that, and replace the license key that's there with your own, it should show up with a map.  Keep in mind that to work it has to be running from the same URL you gave when you created the license key, so from your home computer nothing will show up.  You'll have to upload it to your website to test it out.

On that page you'll see a block of code that looks like:

        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);

That area is where you'll do all the "stuff" you want to do to your map.  In this case all it does is center the map on a particular location, given in latitude and longitude.  You might replace that with another snippet of code (which I've also taken straight from the documentation on how to add controls to move and zoom the map):

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

To add a maker at a specific location you'd do:
  map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));

You could do that as many times as necessary to get all the markers you want.

At this point it's really not just HTML markup anymore, it really is programming.

Author Comment

ID: 17879305
Wow, that's awesome. It seems to work. Any idea's on how to get that little house symbol to replace the standard red Google dot?

Thanks again.

This is what I came up with so far:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAATIAnVijf3nNIVaAJ3hx1thTreRF8_nSWqZukuSsocqfkYbKaeRQ5WbQ8qKatNY2QanaatYRgloy1UQ"
    <script type="text/javascript">
    function load() {
      if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(50.113974, -122.954865), 13);      }
      map.addOverlay(new GMarker(new GLatLng(50.100322, -122.991514)));
      map.addOverlay(new GMarker(new GLatLng(50.111717, -122.945852)));
      map.addOverlay(new GMarker(new GLatLng(50.111937, -122.974434)));
      map.addOverlay(new GMarker(new GLatLng(50.107313, -122.963276)));
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 400px"></div>
LVL 19

Accepted Solution

VoteyDisciple earned 800 total points
ID: 17880402
That looks perfectly valid to me.  The documentation does indeed include an example for creating your own icons:


It involves a lot of busywork to identify where the shadow goes, et cetera, but it's really not bad:

// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// Add a marker to the map:
map.addOverlay(new GMarker(new GMarker(new GLatLng(60.100322, -122.991514), icon));

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question