Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Google Maps Frame (gallery-google-maps-frame) on cdn

Last Updated: 06/22/12

+ 0 -

Steven Olmsted

YUI Contributor

See 42 more by this user.

Created: 03/10/11
Last CDN Push: 06/20/12
Build Tag: gallery-2012.06.20-20-07
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

Google Maps Frame allows the isolation of multiple copies of the Google Maps Javascript API in iframes. This prevents the global google object from being created in the main frame where it is easily accessible from foreign scripts and libraries. This also allows differing versions of the Google Maps Javascript API to be loaded on the same page.

Y.GoogleMapsFrame is an instanceable object. Its constructor function accepts an attributes object with the following members.

container: a selector string or node object which will contain the iframe.
parameters: an optional parameters object passed to GoogleMapsLoader. (see gallery-google-maps-loader for information)

Each Y.GoogleMapsFrame instance has three public events.
failure: fired when GoogleMapsLoader fails to load the Google Maps Javascript API.
load: fireOnce: fired when the Google Maps Javascript API is loaded.
timeout: fired when GoogleMapsLoader times out.

Each Y.GoogleMapsFrame instance has one public method.
isLoaded: returns boolean.

Each Y.GoogleMapsFrame instance has two readOnly attributes. (These attributes are not available immediately after instantiation. They will be available before the success event fires.)
domNode: reference to an empty div created inside the iframe. (This is not an instance of Node.)
frame: the Y.Frame instance that created the iframe.

Before success is fired, a reference to the iframe's global google object is added as a member of the Y.GoogleMapsFrame instance.

If there are issues where instantiating google.maps.Map does not appear to work, or the map appears solid grey, check the height and width of the container node. The iframe will size itself to the container and the map will size itself to the iframe, so height and width must be defined.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.06.20-20-07'
}).use('gallery-google-maps-frame', function (Y) {
    var googleMapsFrame = new Y.GoogleMapsFrame({
        container: '#map',
        parameters: {
            language: 'ja',
            libraries: [
                'adsense',
                'geometry'
            ],
            region: 'ES',
            sensor: false,
            version: '3.4'
        }
    });
    googleMapsFrame.on('load', function () {
        var map = new this.google.maps.Map(this.get('domNode'), {
          zoom: 1,
          center: new this.google.maps.LatLng(0, 0),
          mapTypeId: this.google.maps.MapTypeId.ROADMAP
        });
    }, googleMapsFrame);
});

Forum Posts

No forum posts for this module.