Adding a Google Map to your website

Google have created an excellent mapping system of the whole of the UK and most of the world. This allows places to be easily found via post code,town,business etc.. with the results pinpointed on the map. The map is interactive allowing users to zoom in and out of locations and get directions between two points. See the example below:


Google Map example

 

 

 

 

 

 

 

 

If you haven't yet tried google maps then visit maps.google.co.uk.

Google have also made it very easy to include a map within a website which makes it ideal for schools to show their location.

To add a map to your website just follow these simple steps :

1) Go to maps.google.co.uk and type your school street address in the search box.

2) A map will load showing you the area around your school with a red marker pointing to the place your school is located


 

 

 

 

 

 

 

 

 

 

 

3) Staying within Google maps screen, just below the top menu on the left hand side of the screen click on the link icon like below:
Printer and Link Icon

4) A box will appear showing two lines of code. Highlight the second box that says 'Paste HTML to embed in a website'. With the text highlighted go to EDIT > COPY to copy the selected text.



5) With the copied HTML code you can then place this on a page within your website.


To do this in School Edit open up the page in the School Edit  web editor that you want your map to appear (contact us may be a good page).

Click on the 'Source' button at the top of the Web Editor and scroll down to the very bottom of your page. Scroll down to the end and paste the code that you just copied from Google Maps into the very bottom of the page.

Click on 'Source' again to preview the page and then press 'Save'.

Your interactive Google Map will now be on your School website. 

Map not showing your School location correctly?

In some cases Google does not show the school accurately. If this happens for your school then you will need to get the exact latitude and longitude for your school. To do this use a website such as itouchmap.com, here it will ask for your address or simply your postcode.  Once you have entered your address the map on the screen should then show the address location.  If however, the marker is in the incorrect place on the map, simply click on the red marker and drag it to the correct position on the map showing your correct location.  When your correct positon is showing, copy the latitude and longitude numbers and replace the latitude and longitude numbers in the HTML code you pasted into your text earlier.  See Sample Below:

 

Google Map HTML Text

Replace the text in green with the new latitude and longitude and put this into your website using step 5 above.