Solved

Google Maps on an HTML website

Posted on 2006-11-05
7
231 Views
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.

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.
0
Comment
Question by:4913Horstman
  • 3
  • 2
7 Comments
 
LVL 19

Expert Comment

by:VoteyDisciple
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.
0
 

Author Comment

by:4913Horstman
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.
0
 
LVL 19

Expert Comment

by:VoteyDisciple
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.
0
 

Author Comment

by:4913Horstman
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"
  "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
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 200 total points
ID: 17880402
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

Featured Post

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

930 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now