I have worked with goggle maps before as a stand alone and not with Drupal - and I recent started working on a project that needed a store locater. So, of course I looked everywhere to find something, ran into a nice drop in called Xtreme Locator, but that was proprietary, and unfortunately out of my clients price range, so I decided to go the full Drupal way.
This is my first little explanation of things, so please bear with me if I didn't explain well, just leave a comment and I'd be happy to clarify. Please forgive if I have missed a step, please forgive my approach or code if there are easier ways to do things - I'm always looking for a better solution. Also, this is not written for the layman - this is written for people who seriously know Drupal. Once again, I'd be happy to clarify.
NOTE - I am doing clean installs of the modules, not upgrading - this, as far as I understand can be a nightmare. I use Apache, if you are on IIS server, or something that is not serving pages with Apache - IMHO you are hosed. I'm 99% sure that if you do not have clean urls' this straight up will not work.
Also, this has not been tested on IE. I am working on that today.
Known Bugs:
GMAP: Could NOT use any marker manager. I got a crazy request for invalid marker, and markers just didn't show up anywhere. Also, the marker's info box calculated the wrong width and height for me, so I had to override the infobox with phptemplate and gmap.css, more on that later.
GMAP Location: When I enable this module I received an error, saying that the module could not find 'eid' or 'type' in the location, it is because that the Location module has change their database structure, and those two fields just need to be added to the database again. Just give them default values like the others, and errors go away. This was a more simple solution that trying to hack at the GMAP/Location modules, which is something for their maintainers.
Location: GMAP markers, on Node pages (ie your custom content type) do not show up if you are just using geo-encoding. If you manually set a marker on a node that has the locative information set, it will show - but if you use an address and have the location module find the location for you, it does not appear to set a marker on the node, but the location is set properly - so you are ok.
And Lastly! Warm and humblest, thanks to those who have put this together, IDK what I would have done without these modules! :)
Requirements:
Drupal 5.12
Location: 5.x-3.0
GMAP 5.x-1.x-dev
CCK 5.x-1.10
Views 5.x-1.6
Installation: (In this order, and I have presumed that you have Drupal up and running with clean urls)
1. Views - installs awesome, no problems
2. CCK - ditto
3. Location & All Location Add-ons - no problems upon install
4. GMAP|GMAP Location|GMAP Views - see gmap location up top.
If your installations are successful you are ready to proceed. If you have errors on your installations, please correct those before proceeding any farther.
Set Up: (The long part)
Setting up happens in multiple steps. My objective was to create a store locator, in where the client can create content named: Store Location, and add their locative information, have it automatically populate a view (with the proximity filter exposed) and generally act like the Google equivalent. All the client has to do is make a store location, add contact information and they are done.
So, let's get to it!
Module Setup:
1. Set up the GMAP Module! You need to get an API key from Google - without it you are dead in the water. Set the Map to your specified width and height (I use percentage for width, so it's flexible) and style info, etc. DO NOT USE A MARKER MANAGER! As soon as I turned the managers off, everything sped up and it just worked. I'm sure they work fine in other situations, just not this one.
2. GMAP Location: Enable the Google Map API geocoding = enabled. I left the user option turned off, as it does not apply for this client. Marker action = open info window. Map Behavior flags = none checked.
3. Set up the Location Module!
- Main Settings: I kept the default settings, I don't think I changed anything. If you want the google map to enter lon/lat that happens here
- Map Links: Make sure you have at least google maps checked for the countries you wish to use. For this project they used Canada, Mexico, US & UK
- Geocoding Options: it's not readily apparant, and the module does not warn you: YOU MUST ADD YOUR GOOGLE API KEY A SECOND TIME HERE! It is under Configure parameters, and it appears that you also must double check that the countries you are using have the radio set to the google map. This is the secret that everyone must know!
- Search Options: Left to default.
- ADD ZIP CODES TO THE zipcode table! The best way is to use the query browser from MySQL admin or PHPMyadmin. They used a dump file, so just copy and paste the contents of the .mysql file to the query editor and run the query.
Content Type Setup
1. Add a new content type. Name it relevant to what you are doing.
2. Number of Locations: Under locative information I restricted each node to only have one location (all the select boxes to 1), but I am testing out multiples locations as well.
3. Collection Settings: This is to your liking, but if you are geocoding (having the module find the lat/long for you) then you really need to have a street address, city, province and postal code. In this case, also telephone numbers are grand.
I did not touch the RSS or display settings.
4. Make a new node from your content type, add the locative information, and save it. You will not see the geoencoding happen as you make the node, you have to save it. But, when you go back and edit the node it will have the lat/long added in. If not, you should not proceed any further and figure out where you have gone wrong. if you have a lat/long saved to your node, you are ready to proceed. You can add it manually via the map, but the point of what I am doing is to make it useful for the tech un-savvy.
View Setup:
After you have your node set up and created, you can now finally make a view to display the darn thing!
1. Add a new view
2. Name it relevant to what you are doing
3. Provide Page View
- url - make a url for this, why not?
- view type - GMAP View
- Empty text - Make a nice message, it's courteous and helps one debug.
4. Fields
- Add all the 'Location:Field Name' fields your are using here.
5. Filters
- Node:Published = Yes
- Node Type = is one of %your content type%
- Location: Has Coordinates = Has Coordinates
- Location: Proximity = your settings
6. Exposed Filters
- Location:Proximity - optional = true | Filter settings default = true
No sort criteria added, I mean why would you for a map view?
7. Save your view!
If all the above steps where successful, you installed the modules correctly etc, you should have a working map with one location, on a views map.
WAIT YOU ARE NOT DONE!
I got this far and I found a number of bugs.
1. The proximity search was not working, please see: http://drupal.org/node/371889 I had to correct a perceived bug in locations_views.php module
2. I had to modify my template.php file to get the infobox from google maps to display correctly! My height was all screwed up and i wanted to theme things my own way.
PHP template modifications
If you have not ever modified a template.php file here's your chance! All you have to do is place the supplied code at the bottom of your theme's template.php file. I found this on another post, and I can't remember who it was from, but thanks for pointing me in the right direction! You rock!
//overriding gmap theme
function phptemplate_gmap_views_marker_label($view, $fields, $entry) {
//print_r($view->field);
$marker_output = '<span>Main Phone:</span><br />';
foreach ($view->field as $field) {
//print_r($field['field']);
switch ($field['field']) {
case 'title':
$title = '<span class="gmap-popup-'. $field['field'] .'">'. views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view) .'</span><br />';
break;
case 'street':
$gmap_address .= views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view);
$address = '<span class="gmap-popup-'. $field['field'] .'">'. views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view) .'</span><br />';
break;
case 'city':
$gmap_address .= ' ' .views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view) .',';
$address .= '<span class="gmap-popup-'. $field['field'] .'">'. views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view) .'</span>, ';
break;
case 'province':
$gmap_address .= ' ' .views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view);
$address .= '<span class="gmap-popup-'. $field['field'] .'">'. views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view) .'</span> ';
break;
case 'postal_code':
$gmap_address .= ' ' .views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view);
$address .= '<span class="gmap-popup-'. $field['field'] .'">'. views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view) .'</span><br />';
break;
case 'fax':
$address .= '<span class="gmap-popup-'. $field['field'] .'">Fax: '. views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view) .'</span><br />';
break;
case 'distance':
$distance = '<br /><span class="gmap-popup-'. $field['field'] .'">Distance: '. views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view) .'</span><br />';
break;
default:
$marker_output .= '<span class="gmap-popup-'. $field['field'] .'">'. views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view) .'</span>';
break;
}
}
$output = '<table id="gmap-popup-table" width="100%" border="0">
<tr>
<td width="65%">'.$title.$address.$distance.'</td>
<td width="35%">'.$marker_output.'</td>
</tr>
</table>
<div>
<form id="gmap-directions" action="http://maps.google.com/maps" method="get">
<p><label for="saddr">From</label>
<input type="text" name="saddr" id="saddr" value="" />
<p><label for="daddr">To</label>
<input type="text" name="daddr" id="daddr" value="'.$gmap_address.'" />
<input type="submit" value="Get Directions" /></p>
</form>
</div>
';
return '<div class="gmap-popup">' .$output .'</div>';
}
I know, I know, tables and all that jazz - but it solves a huge problem for me with IE and basically ;p (which is sticking my tongue out if you didn't notice). What i had to do what re-theme the whole thing, if you strip this down - you can take out all the tables and all the junk I added in, turn it into more OOP, this is simply an example. I'm sure there is a much better way to do this, so any code help is brilliant - I'm more of a problem solver than uber-coder.
what this does it output strictly to a two column infobox layout, and then adds a way for the user to get directions from Google, because I'd rather people be attached to their google accounts, so they can actually save their search and use it again!
And, here's the gmap.css modify with care! I would only touch what you need.
v\:* {
behavior:url(#default#VML);
}
.gmap-popup {
color:#000000 !important;
height: 100%;
width:250px;
font-size:.9em;
line-height:1.2em;
}
.gmap-popup img {
margin:5px;
}
.gmap-popup a {
color:#000000 !important;
}
#gmap-popup-table, #gmap-popup-table tbody {
color:#000000 !important;
border: 0px;
}
.geo, .gmap-popup-latitude, .gmap-popup-longitude {
display:none !important;
}
.gmap-tooltip{
padding: 2px;
margin: 0;
border: solid black 1px;
}
.gmap-left {
float: left;
}
.gmap-center {
margin-left: auto;
margin-right: auto;
}
.gmap-right {
float: right;
}
/*Fields for location module*/
.gmap-popup-title {
font-weight:bold;
font-size:1.2em;
line-height: 1.5em;
}
.gmap-popup-phone {
font-size:1.3em;
line-height: 1.3em;
}
/*Directions*/
#gmap-directions, #gmap-directions input {
font-size:10px;
width:100%;
}
- You can check out the working version at: http://drupal5.ph-balanced.com/store-locations
Thanks for reading! Please let me know how I can explain this better, I am trying to write out a script so ultimately this can be made into a video tutorial.
Comments
I would love to see the demo
I would love to see the demo but the like doesnt work.
http://drupal5.ph-balanced.com/store-locations
Danny
Post new comment