Google Maps Testing

by tdff3

HTML

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

<div id="my-content">
    <div class="box-white">
        <h1>Header 1</h1>
        <h2>Header 2</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et hendrerit metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi consequat arcu vitae leo hendrerit aliquam. Nunc semper, quam in hendrerit ullamcorper, nisl velit condimentum massa, vel tempor justo lacus eu lacus. Integer dictum semper velit. Donec lacinia dolor ut felis malesuada, sit amet ullamcorper nisl molestie. Mauris eget interdum nibh. Maecenas vulputate fringilla purus eu dictum. In varius feugiat urna et laoreet. Nunc vel viverra quam, in aliquam quam. Ut condimentum ac erat rutrum rhoncus. Vestibulum mollis tincidunt porttitor. Suspendisse eleifend imperdiet ullamcorper. Praesent vitae tortor vel lorem cursus porttitor sed non magna. Nullam ac luctus mauris.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et hendrerit metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi consequat arcu vitae leo hendrerit aliquam. Nunc semper, quam in hendrerit ullamcorper, nisl velit condimentum massa, vel tempor justo lacus eu lacus. Integer dictum semper velit. Donec lacinia dolor ut felis malesuada, sit amet ullamcorper nisl molestie. Mauris eget interdum nibh. Maecenas vulputate fringilla purus eu dictum. In varius feugiat urna et laoreet. Nunc vel viverra quam, in aliquam quam. Ut condimentum ac erat rutrum rhoncus. Vestibulum mollis tincidunt porttitor. Suspendisse eleifend imperdiet ullamcorper. Praesent vitae tortor vel lorem cursus porttitor sed non magna. Nullam ac luctus mauris.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et hendrerit metus. Class aptent taciti sociosqu ad litora torquent per conubia...

CSS

#map-fixed
{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}

#map-canvas
{
    width: 100%;
    height: 100%;
}

#my-content
{
    position: relative;
    float: left;
    margin: 0px 50px;
    padding: 15px;
    background-color: rgba( 41, 42, 42, 0.12 );
}

.box-white
{
    width: 300px;
    background-color: white;
}

JavaScript

function initialize()
{
    var mapOptions =
    {
        zoom: 8,
        center: new google.maps.LatLng( -33.9, 151.2 ),
        disableDefaultUI: true,
        zoomControl: true,
        zoomControlOptions:
        {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        scrollwheel: false
    };
    
    var map = new google.maps.Map
    (
        document.getElementById( 'map-canvas' ),
        mapOptions
    );
    
    var beaches =
    [
        [ 'Bondi Beach', -33.890542, 151.274856, 4 ],
        [ 'Coogee Beach', -33.423036, 151.259052, 5 ],
        [ 'Cronulla Beach', -34.028249, 121.157507, 3 ],
        [ 'Manly Beach', -33.80010128657071, 151.28747820854187, 2 ],
        [ 'Maroubra Beach', -33.450198, 151.259302, 1 ]
    ];
    
    setMarkers( map, beaches );
}

function setMarkers( map, locations )
{
    var bounds = new google.maps.LatLngBounds();
    
    for( var i = 0; i < locations.length; i++ )
    {
        var beach = locations[ i ];
        var myLatLng = new google.maps.LatLng( beach[ 1 ], beach[ 2 ] );
        var marker = new google.maps.Marker(
        {
            position: myLatLng,
            map: map,
            title: beach[ 0 ],
            zIndex: beach[ 3 ]
        } );
        
        bounds.extend( myLatLng );
    }
    
    map.fitBounds( bounds );
}

function loadScript()
{
    var script = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
        'callback=initialize';
    document.body.appendChild( script );
}

window.onload = loadScript;