?
Solved

Google Maps on an HTML website

Posted on 2006-11-05
7
Medium Priority
?
247 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 800 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

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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 viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

800 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