Google Maps on an HTML website

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.

http://www.soprovich.com/area_map.html

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.
4913HorstmanAsked:
Who is Participating?
 
VoteyDiscipleConnect With a Mentor Commented:
That looks perfectly valid to me.  The documentation does indeed include an example for creating your own icons:

http://www.google.com/apis/maps/documentation/#Creating_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));
0
 
VoteyDiscipleCommented:
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.
0
 
4913HorstmanAuthor Commented:
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.
0
 
VoteyDiscipleCommented:
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.
0
 
4913HorstmanAuthor Commented:
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"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <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"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    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)));
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 400px"></div>
  </body>
</html>
0
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.

All Courses

From novice to tech pro — start learning today.