Lunenfeld-Tanenbaum Research Institute

Research Resources  |   RTC  |   sciHigh  |   HR & CV Bank  |   Finance  |   Grants  |   Technology Transfer  |   Administrative Assistants  |   Biobar  |   Safety  |  
Lunenfeld-Tanenbaum DBA

 

 

 

Embedding Google Maps in a Webpage

Spring 2015: A couple of years ago Google has redesigned the Google Maps. Recently they also disabled the old method of embedding the Google Maps in Websites. Many Websites that used to embed the maps using the old method may display an error message indicating that embedding is not allowed to protect Some of the changes may also affect the direct links (some attributes within the links appear to lack backward compatibility and may affect how those maps will be displayed; so test your links each time before sending them out).

Those Websites must be updated (edit the source code of affected pages).

Below is a simple example of the new code followed by one of the (by now) obsolete examples. Both examples point to he same set of map coordinates. More detailed description of the new methods can be found on Google Websites:
<https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map>


<!-- -----------------------------------------------------------------------
NEW GOOGLE MAP CODE FOR EMBEDDING IN A WEBPAGE:
----------------------------------------------------------------------- -->

<!-- -----------------------------------------------------------------------
start of the elements belonging (usually) in the <head> section of your page
----------------------------------------------------------------------- -->
<style>
    #map-canvas {
    width: 900px;
    height: 400px;
    padding-left:60px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
        center: new google.maps.LatLng(43.657454, -79.389444),
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- -----------------------------------------------------------------------
end of the <head> elements
----------------------------------------------------------------------- -->

<!-- -----------------------------------------------------------------------
the following should be placed in appropriate spot in the <body> section of your page
----------------------------------------------------------------------- -->

<div id="map-canvas"></div>

<!-- -----------------------------------------------------------------------
END OF NEW CODE
more: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
----------------------------------------------------------------------- -->

 

<!-- -----------------------------------------------------------------------
OBSOLETE CODE:
----------------------------------------------------------------------- -->
<!-- The following is one of the old approaches for embedding Google Maps.
This does not work anymore. -->

<iframe height="450" marginheight="0" src="http://maps.google.com/maps/mm?hl=en&ie=UTF8&layer=c&cbll=43.657454,-79.389444&panoid=KYcXTzvFfZkM9mRZCi-yXw&cbp=12,254.6,,0,-5.43&source=embed&ll=43.657454,-79.389444&spn=0,0.00177&z=19&output=svembed" frameborder="0" width="950" marginwidth="0" scrolling="no"></iframe>
<br />
<small><a style="text-align: left; color: #0000ff" href="http://maps.google.com/maps/mm?hl=en&ie=UTF8&layer=c&cbll=43.657454,-79.389444&panoid=KYcXTzvFfZkM9mRZCi-yXw&cbp=12,254.6,,0,-5.43&source=embed&ll=43.657454,-79.389444&spn=0,0.00177&z=19">View Larger Map</a></small>
<!-- -----------------------------------------------------------------------
END OF THE OBSOLETE CODE
----------------------------------------------------------------------- -->

 

/ Resources / CMS / Embedding Google Maps
          
 

DBA

  

Self Help

   

Credentials

    

CONTACTDB

    

PIN

   

File Transfer Service

   

CVBank

    

CVBank Applicants

  

Resources

   

CMS

    

Embedding Google Maps

   

Branding

    

Logo

    

Templates

    

Webpage Template

    

Standard Colours

   

Barcode

   

  

Contact Us