How to Add Google Maps to Drupal Content
Hi Friends ,
In this post I am going to explain how to add Google Maps to Drupal Content. To accomplish this , following modules will be needed.
- Addressfield : A Drupal 7 field module to hold postal addresses, implementing a subset of the fields defined in the xNAL standard.
- Addressfield_staticmap : This module can generate either of the 3 following as a block when placed on a content type that has an address field:
1) Google static map
2) Regular JS Google map that defaults to the static map if Javascript is disabled.
2) Regular JS Google map that defaults to the static map if Javascript is disabled.
3) Mapquest static map
Download links are given below.
• http://drupal.org/project/addressfield
• http://drupal.org/project/addressfield_staticmap
For this, ctools module is also required.
• http://drupal.org/project/addressfield
• http://drupal.org/project/addressfield_staticmap
For this, ctools module is also required.
• http://drupal.org/project/ctools
After the installation , enable them. Now you have to create a content using this address field module.For that follow the steps as given below.
• Go to Structure > Content types.
• Create a new content type say “Test”.
• Enter “Address” as Label and “Postal Address ” from Dropdown “Type of data to store”.
• Click Save.
After the installation , enable them. Now you have to create a content using this address field module.For that follow the steps as given below.
• Go to Structure > Content types.
• Create a new content type say “Test”.
• Enter “Address” as Label and “Postal Address ” from Dropdown “Type of data to store”.
• Click Save.
Adding Content
• Go to Content > Add Content > Test (here).
• Provide the Title, description , Country ,State ,City, Zip Code, etc.
Configuration of address field
• Go to Configuration > Address Field Static Map Block in SYSTEM Block
• Select the address field you have just created. In my case its “field_address” .
• In Mapping API Select “Regular Google maps with fallback to Static map”.
• Adjust Zoom level as per your requirement. Write 200x200 in image Size.
• Click Save.
Placement of Block
• Go to Structure > Blocks
• Select proper place to display the block.
• Click Save Blocks.
• Select proper place to display the block.
• Click Save Blocks.
Now ,go to see how the created content looks with Google Map. It will look as image given below.
Comments
Post a Comment