More Information:
Buy Now |
Questions or Comments?
|
||||
|
|
|||||||
 |
 |
 |
 |
 |
 |
 |
 |
|
Realty Manager Tutorial: Display full listings with Google Maps (version 2.0) This tutorial outlines how to set up a Google Map with each of your property listings represented by a marker in the map. The map will be automatically updated based on your current listings, so as you add and remove properties it will always be up to date. See this in action on our example page Before you get started, I should note that Google Maps 2 is not currently compatible with the Safari browser. Let us know if you need assistance setting things up. You can post to the forum or fill out a support request, or even give us a call. Note: If you want to simply link to a Google Map of a single property (similar to the Yahoo Maps links in the default templates), refer to this forum post: http://www.interactivetools.com/iforum/_P42271
This tutorial currently works with North American listings only. For listings elsewhere, use this tutorial instead. 1. XHTML strict and iframes To make the Google Map appear on your own page, you're going to use an iframe. The page inside the iframe will get created on the fly using a template that we'll name _google_map2.html. To work with Google Maps, this template needs to be valid as XHTML strict.Copy the code from the text box below into a new HTML file named _google_map2.html. Once you have made a few adjustments to this template, as outlined in the following steps, you'll save this into the Realty Manager templates/ folder on your web site. _google_map2.html template:2. Google Maps API Key Google Maps requires you to generate a unique API Key for your website using the Google Map signup form. (Note that you need to have a Google user account. You can signup at this page.) Use the page below to create your API key. Paste the key that you've generated into line 6 of the sample template: <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR GOOGLE API KEY" type="text/javascript"></script> Note: it's best to generate the API Key with the base URL of your website (e.g. http://www.mysite.com), rather than a subfolder (http://www.mysite.com/folder). That way, the API is valid for any page on your site.
3. Map Centering and Zoom Line 19 of the _google_map2.html template tells the Google Maps where to center the map and how close to "zoom in". You'll want to update this section with the longitude and latitude coordinates of the location you want for your center point. In the template code, you'll see this: map.setCenter(new GLatLng(49.19067925930702,-123.07159423828125), 9);-123.07159423828125 is the longitude 49.19067925930702 is the latitude 9 is the zoom level To find the longitude and latitude for your center point, simply go to the web page below and click a point on the map. The coordinates of the point will appear at the bottom of the page. longitude/latitude finder:http://mapki.com/index.php?title=Get_Lon_Lat You can experiment with the zoom level to find a value that suits your listings - what's appropriate depends on how wide an area your listings are in. 4. Template Cells - popup bubbles Each "templatecell" in the _google_map2.html template has a line similar to the one below: showAddress("$lfield6$ $lfield7$","LOTS OF HTML CODE"); The placeholders in the first quotations ($lfield6$ $lfield7$) make up the address. The template I've provided only have two because I only needed street and postal code. You can use additional fields to make up this address, such as the fields corresponding to house number, city, state, as well as the street and postal code. The largest block of code in these lines is noted above as "LOTS OF HTML CODE HERE". This specifies what appears in the pop-up when the address bubble on the map is clicked. You can use just about any content in here that you like, but keep in mind these two points: a) the content also needs to be XHTML strict I used a table to keep things organized. A popup with lots of content will be difficult to read, so I focused on a few key details and put in a link to the listing page for a more complete description. After you have finished modifying the template, upload it into your Realty Manager "templates/" directory. 5. Search Query to dynamically create your listings map As the last step, you'll want add an iframe to the pages you want the map in. This iframe will reference a query of Realty Manager's search engine using the _google_map2.html template. For example, you could put it in your Listings Index template, or even on a web page outside of Realty Manager. Here is an example of the iframe code to use (update the code with YOUR path to search.cgi): <iframe src="/cgi-bin/listman/exec/search.cgi?search=1&template=_google_map2.html" width=500 height=515></iframe> I recommend making your iframe slightly larger than the map generated by the template (the height and width of the map are set on line 67 of the _google_map2.html template). If the iframe is smaller than the map it can result in some weird browser behavior. And that's about it. Your new Google Map will will be dynamically updated as listings are added or removed. If you're an advanced user, Google has some excellent resources for the Google Maps API. It has tons of examples and the discussion group users have created some amazing add-ons you may want to try: http://maps.google.com/apis/maps/ We are here to help, so let us know what you think and feel free to send in any questions you have. We also offer a Priority Consulting service if you'd prefer to get us to set this up for you. To inquire, send us an email or call 1-800-752-0455. Did this "How to" make sense? Send us your feedback, or let us know if you're using something like this on your installation of Realty Manager and we'll link to it as an example. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||