GoogleMap API - Adding Data to the Map

by freedawirl

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<button id="btnTerrain">Terrain</button>
<button id="btnRoadMap">Road Map</button>
<button id="btnSatellite">Satellite</button>
<button id="btnHybrid">Hybrid</button>
<div id="mapDiv"></div>

CSS

#mapDiv {
    height:500px;
    width:500px border:1px solid red;
}

JavaScript

//Initialize Map Function
function initialize() {

    //1 Map Options Object
    var mapOptions = {
        center: new google.maps.LatLng(30.33851, -97.831192),
        zoom: 10,
        //Disable default map controls
        disableDefaultUI: true,
        /* Add Map control one by - this allows the setting of idividual map control options */
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        panControl: true,
        mapTypeControl: true,
        scaleControl: true,
        streetViewControl: true,
        rotateControl: true,
        overviewMapControl: true

    };
    //2 Create Map
    var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
    /* Buttons Being call from here inside initialize function */
    addButtons(map);
}

/* New Function to house map type button options - this recieves the map object created in above function */
function addButtons(map) {


    /* Event Handler that listens for the map buttons to be clicked and then sets the map type appropiately */
    document.getElementById('btnTerrain').addEventListener('click', function () {
        map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
    });

    document.getElementById('btnRoadMap').addEventListener('click', function () {
        map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
    });
    document.getElementById('btnSatellite').addEventListener('click', function () {
        map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
    });

    document.getElementById('btnHybrid').addEventListener('click', function () {
        map.setMapTypeId(google.maps.MapTypeId.HYBRID);
    });


}

/* Event Handler that listens for page load event and then calls the above "initialize function" function initialize() when the page loads */
google.maps.event.addDomListener(window, "load", initialize);