|
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
----------------------------------------------------------------------- -->
|
