How to Add Google Map to Your Site's Contact Page
- Boxes
- Context
- Drupal 7
Integrate Google Maps on Contact Us Page
The orthodox behavior of designing a contact page involves the inclusion of many contents like the company or individual's physical address, phone number, email address, and feedback form. Over the years it has become a trend to display the locality with the help of Google maps. But the jinx over Drupal Newbie is how to integrate Google Maps to a contact page. It isn't an arduous task, just involves some copy and paste work.
I have used Context and Box module to implement this successfully on my site. I would suggest using the same set of modules to archive it.
The following steps can ride you on the correct path.
- Open Google maps and type your address and location.
- Once you get the exact spot from Google Maps click the Link button (beside the Get Direction, My Places button).
- Now click the Customize and preview embedded view.
[[{"type":"media","view_mode":"media_large","fid":"76","attributes":{"alt":"","class":"media-image","style":"width: 486px; height: 141px;","typeof":"foaf:Image"}}]]
- A popup with the Google map location will appear before you.
- Select the map size i.e: small/medium/large/custom.
- Once the width and height are perfect to match your contact page, copy the HTML code.
- Now click on Structure > Blocks > Add Box.
- Provide a corresponding name to the box. If you are using WYSIWYG editors, click the Source icon from the controls.
- Now paste the copied code here and save this box.
- Now click on Structure > Context > Add.
- Now select the condition as path and provide /contact in the path field. Assuming you use the default core contact module or webform node with path alias /contact.
- Select reaction as Block and place the above-created box in the designated region as per your wish.
- Now save and visit your contact page to view your location in Google Maps.
We have added a snapshot of our contact page integrated with Google Maps.
[[{"type":"media","view_mode":"media_large","fid":"79","attributes":{"alt":"","class":"media-image","style":"width: 493px; height: 205px;","typeof":"foaf:Image"}}]]