This is the OLD WebbyZone archive. Click Here if you wish to check out the all NEW WebbyZone.

How To Create Custom Google Maps for Your Site

Post image of How To Create Custom Google Maps for Your Site
Filed in Web Development 0 comments

If you have a physical store, or a company where you’d like your clients to visit, it is very important for your website to have a Google Map integrated, ideally on your contacts page, to provide the right directions. Embedding maps in your site can make it extremely easy for your store or company to be located by potential customers and clients and add to fruitful conversions. So how do you do that?

Well, if you are a developer who loves coding there’s a pretty nice tutorial just for you at Stiern. But just in case you want to save all that trouble or you are not so comfortable with the codes, here’s a much easier way to embed Google Maps to your blog / website directly from Google, explained step by step.

Step 1. Log in to your Google account.

Step 2. Go to Maps.Google.com You’ll see a page like the image below -

Google Maps Main Page

Google Maps Main Page

Step 3. On the search box, type in your details in this format -  Street Name, City, State, Country, Zip / Pin. Once done, you’ll see some  search results displaying in the left hand side and a corresponding indicator on the map in right hand side. The following image will explain -

Google Maps Search Result Display

Google Maps Search Result Display

Step 4. Now click on the “My Maps” link above the search result. You’ll see an Youtube video in place of your search results, explaining how to create your own map. Just below that is a “Get Started” button. Click it to get started.

Google Maps - Getting Started with My Maps

Google Maps - Getting Started with My Maps

Step 5. Once you click the “Get Started” button, you’ll observe a few changes. Firstly, a form comes up where the video was placed. The form has 2 fields – Title and Description and radio box options – Public and Unlisted. The Title and Description field will of course contain the title and description of your indicator, but we will leave it for the moment.

The “Public” radio box option will display your indicator to everyone, the map will be published in search result and user profiles. While the “Unlisted” option will hide it from public display and will only be visible to those who have link for the map. It’s better to check the “Public” option if you want to display your store / company in search results. You can do the selection now.

Also, the most important thing is, now you will see a set of three icons appear on the top left of the map. These are your customization tool icons. The first one, that of a hand, is used to drag the map to centralize the right location, the second, a balloon like icon is used to drop your pointer / indicator and the third, a zigzag line, is used to simply draw a line, draw a line along the roads or draw any shape. This third icon can be used to create directions from a nearest landmark. See the image below -

Google Maps - The Customization Begins

Google Maps - The Customization Begins

Step 6. Now click on the second icon, the drop indicator icon, and click on your exact location on the map. You’ll see the balloon like pointer getting dropped there and a form coming up above it. You can enter the relevant title and description here. The best part is, you can have 3 options to fill in your desired description – plain text, rich text which gives you a WYSIWYG editor to insert links and images and format the text and thirdly html option where you can fully hard code your description and even embed a video. See image below -

Google Maps - Adding Title and Description to Pointer

Google Maps - Adding Title and Description to Pointer

And you can customize the pointer too. Just click on the blue balloon icon next to your title field and you can see quite a few attractive and symbolic icons showing up. You can use any of them as your indicator,  or click on the “Add an icon” link and enter the url of your very own customized indicator. Once done, click OK. See image below -

Google Maps - Customizing The Indicator

Google Maps - Customizing The Indicator

Step 7. Now to show directions from a specific landmark to your store / company, click on the small dropdown mark of last icon, that looks like a zigzag line. You’ll get 3 options, draw a line, draw a line along the roads and draw a shape. Choose draw a line along the road. Observe that your mouse pointer now looks like a cross with a dot in the middle when over the map. Now click near your store / company pointer. You’ll see a small circle appear, and this is your first point. Now simply move the mouse towards the nearest landmark, you’ll see a blue line appear along the roads. Click once on the spot where your nearest landmark is located and you’ll see another circle appear there. This is the end point. Now click on the last circle again and a form would appear asking you to fill up the details of the route. Fill it up and click ok…Done! See the image below -

Google Maps - Road Directions

Google Maps - Road Directions

Step 8. Now your map is almost ready, you can fill up the details on the left hand side – the title and description fields and click the “Done” button on top. Your map is ready to use. Now click on the “Link” hyperlink at the extreme right towards the top. It will give you a link that you can send via email or IM and an embed code. Copying and pasting this embed code at a desired location in your website will bring up your customized saved map and enable your visitors to point to your location. You can also customize the width and height of the map as per your requirement by clicking on the “Customize and preview embedded map” link just below the embed code. See the image -

Google Maps - Getting the Embed Code

Google Maps - Getting the Embed Code

That’s it! Your map’s on your site. See the WebbyZone Workshop location and direction I’ve embedded below, right here in this post!


View WebbyZone Workshop in a larger map

Posted by Ranadeep   @   17 October 2009 0 comments
Tags : , ,

0 Comments

No comments yet. Be the first to leave a comment !
Leave a Comment

Name

Email

Website

Previous Post
«
Next Post
»
CrossBlock designed by ZenVerse