Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Add Google Maps to a website

Create a customised map and embed into a web page

Google Maps Logo


01. Find location


This step is simple and straightforward. Head to Google Maps (http://maps.google.com/) and enter the location to be included in the site. This can be a generic location like a county, ie Dorset, or a more precise location, ie a street name, or even the address of a specific location.

02. Choose type

Google Maps comes in a variety of guises. There is the standard issue map, a satellite view or a hybrid view. Select the option that is to be used. Alternatively, to get a Street View of the chosen location drag the peg to the desired location and adjust accordingly until correct.

03. Get the link

Click the Link link in the top-right of the map to view the related window. This includes the necessary HTML code to add to a page. Before copying the code click Customize and preview the embedded map link. Use one of the predeined sizes or click Custom and add width and height.

04. Copy and paste code

Once the map window has been resized, copy (Ctrl/Cmd+C) the HTML code in the copy and paste box. Now head to the web where the map is to exist and paste in the code. This will present a grey box where the map resides. Save the page and preview in the chosen browser.

05. My Maps

To create a more custom map, users will need a Google account, click My Maps>Create new map. Now add a title and description for the map. By default the map is Public, click Private to share with selected users. Alternatively, if a map has already been created select from the list.

06. Add places

The hand icon is the selection tool, use this to drag the map to the desired location. Use the pin icon to locate a
placemark and click in the desired location. Now add a title and description and press OK. When inished click Link and copy and paste the code and add to the webpage.

×