How to Create and Embed Custom Maps

Map information has enormous value in real estate: location, location… A real estate listing or web page has to have a map and the map should contain features and highlights about the neighbourhood. For a commercial office listing one would require information on transportation such as highways, railways, the airport, and public transit. The map should also locate significant urban elements such as the financial core and other significant districts.

Google has made it easy to embed maps in web pages. You don't need any programming skills to do this. You do need access to the 'source code' of your web page, but you won't need to do anything more technical than cut and paste.

• First, go to the Google Maps site at http://maps.google.com" . You will need to login or create a Google account in order to save maps.
  At the top left, click on 'Create new map'. Select a name for your map, and an optional description. You can leave the map as 'Unlisted'.
  
  
• Next, you will need to add some locations and landmarks to the map.
  
  
• Click on the marker icon to drag new locations onto the map. You can change the description and icon in the details pop-up box:
  
  
• Another way to add place-marks is to first search on the map using the search field at the top of the page. You can then click on each search result icon and add it to the map by using the 'Save to My Maps Link' in the pop-up.
  
  
• You should also try the other map tools: 'Draw a Shape' and 'Draw a Line' to indicate other significant features on the map.
  Once you have configured the map as you want it, it is time to 'Embed' it in your web page. Use the 'Link' feature at the top right and then select the 'Paste HTML...'
  
  
• Use the 'Customize and preview embedded map' link at the bottom of this box to change the default size and layout of your map.
  
  
• At the bottom of the page you will see the code that you can copy and insert into any website:
  
  

Paste this in to the source code of your website at the appropriate place and you're done! Here is an example of how I used this technique to add a map at our sailing club. Click here to see the page:

And here is another example from our office. Project managers are using a shared embedded map to coordinate site work in the GTA:

It's really very simple. You should know that it used to be more complicated. Google used to require a special key and access to their API. For more advanced features and configuration, you still need this. But for most applications, this simple method is all you need.

Let me know if this is helpful. Please share the maps you create and do not hesitate to contact me if you need any help!