Solved

Google Maps on an HTML website

Posted on 2006-11-05
7
228 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&amp;v=2&amp;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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
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 …
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

708 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

16 Experts available now in Live!

Get 1:1 Help Now