15

First of all, let me just state that I don't care which version of Drupal I'd have to use (6 or 7). I have experience with both versions I just didn't need to work with Google Maps till now. The requirements are pretty basic (from what I understand):

1) Have a node for every company that I want to add in the map

2) In the node edit form I would like to add an address and have it added in a custom google map (or maybe copy-paste the link of a google map location)

3) Have a search function to find the nearest company for a given location

There are like tons of different modules out there, and I would like to be pointed to the right direction instead of looking through 15+ different modules just to finally realize that I need to write a custom module for myself.

Thanks in advance.

36

I have created a Drupal feature that implements this using OpenLayers ( See http://drupal.org/project/ol_locator ) or you can use the following walk-through to set up your own.

  1. Download and enable the following Modules:

  2. Enable sub-modules:

    • Geofield Map 7.x-1.0-alpha5
    • Views UI 7.x-3.0-rc1
    • OpenLayers UI 7.x-2.0-alpha2
    • OpenLayers Views 7.x-2.0-alpha2
  3. Go to admin/structure/types/add and create new content type called "Location"

  4. Go to admin/structure/types/manage/location/fields and add the following fields:

    • Label: Address > Field name: address > Field type: Postal address > Widget: Dynamic address form
  5. Select which available countries you would prefer from the list. Leave blank to allow all of them.

  6. Check off "Address form (country-specific)"

    • Note: The countries and their associated fields are handled by the Addressfield module. If you do not see your country or if it does not have the appropriate fields you need to file an issue with that module http://drupal.org/project/addressfield (Check to see if there is an issue in the queue about your missing country first before posting)
  7. Label: Geofield > Field name: geofield > Field type: Geofield > Widget: Geocode from another field

  8. Go to admin/structure/types/manage/ol_locator_location/display and change the Default display for Geofield:

    • Label: Hidden > Format: OpenLayers
  9. Click on gear icon and select the following:

    • OpenLayers Preset: Geofield Formater Map > Data options: Use full geometry
  10. Go to admin/structure/openlayers/layers/settings and set the following:

    • Google Maps API version: v3.2
  11. Let's test to see if the Geocoding is working by creating a Test Location

    • When creating a test content type, make sure you are using a well established address. If Google doesn't know about your address, then neither will your new site.
  12. Go to admin/structure/views/add and create a new view with the following information

    • View name: Proximity Search > Description: Displays geocoded locations on a dynamic map for users to do proximity searches. > Show: Content of type: Location sorted by: Unsorted > Continue & edit
  13. Add the following fields and keep their default values, except where noted:

    1. Content: Title > Check off Create a label: "Title"
    2. Content: Address (Address)
    3. Content: Geofield (Geofield) > Exclude from display
    4. Proximity: Distance (Distance)
  14. Add the following Filter Criteria to the existing:

    • Content: Published (Yes) and
    • Content: Type (= Location)
    • Proximity: Great-circle (exposed) > Expose this filter to visitors, to allow them to change it > Label: Proximity > add "10" to Value field > Unlock unit of measurement > Unlock location
  15. Header > Global:Text area > Display even if view has no result

    • "Find a location near you. You can search using your city, province/state or a postal/zip code."
  16. No results behavior > Global: Text area and add the following:

    • "Sorry, no results found.
      1.) Verify the accuracy of your postal/zip code
      2.) Check the spelling of your city, province or state
      3.) Increase the proximity distance"
  17. Submit button text: Search

  18. Add new display: "OpenLayers Data Overlay"

  19. Format:

    • Settings > Apply this openlayers (override) > Map Data Sources: WKT > WKT Field: Geofield > Description Field > > Apply (this display)
  20. Save the view

  21. Go to admin/structure/openlayers/maps

  22. Clone the default map

  23. General information > Name: location_map . Title: Location Map > Map Description: This is the default location map.

  24. Layer & styles > Overlay layers (select the view we just created) Locations "Enabled" "Activated" Do the same for Placeholder for Geofield Formatter

  25. Behaviours > Pop Up (have to come back and "Select layer to apply popups to." later) > Zoom to Layer "Select layer to zoom to when the map is loaded" > Point Zoom Level : 20 ****

  26. Save the map

  27. Go back to the view we just created

    • admin/structure/views/view/proximity_search/edit
  28. Add display "Page"

    • Path: /locator
    • Format: OpenLayers Map > Apply (this display) > Map: Locations Map (The one we just created in OpenLayers) > Apply
  29. Save the view (We should now see our map in the preview pane at the bottom of our view, with any test content

  30. Add display: "attachment"

    • Format: Table > Apply (this display)
    • Attach to: Page
    • Inherit exposed filters: Yes
    • Remove the Header > Global: Text area > Apply (this display)
    • Items to display: Display a specified number of items | 5 items
    • Inherit pager: Yes
    • Render pager: Yes
  31. Save View

  32. Behaviours > Pop Up > Layers > proximity_search_openlayers_1 (The views Openlayers map we just created)

  33. Zoom to Layer > Zooms to the extent of a given layer on map loading. > proximity_search_openlayers_1

  34. Return back to admin/structure/types/manage/location/display > click gear icon and change Open Layers Preset to the Location Map that we just created > Update > Save

Voila! Done

| improve this answer | |
  • 1
    you answer is so detailed that I want to put a bounty and auto-reward it to you :D I'll try the steps now and let you know how it worked – F1234k Nov 4 '11 at 13:15
  • It's not just answer, it's a tutorial :) – Codium Aug 12 '12 at 21:33
  • +1, but it's important to note that ol_locator feature can be buggy with newer versions of modules, and there are no version number restrictions in it. I experienced it (unfortunately). But your answer is really nicely detailed. – Sk8erPeter Sep 21 '12 at 13:34
  • If the module is buggy, please post it in the my module's issue queue with exactly what not is working (full details). I have no problem fixing the issues but I need to know about them. :) – user842 Sep 21 '12 at 17:54
  • I just tested OpenLayers Locator out and it works very well and as advertised. Thanks @nicoz. – Nigel Waters Nov 9 '12 at 21:48
2

Use simple google maps module. It is very simple and easy to use.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.