Google Map is not displaying as expected

Question

I want to create google map. Right now it is showing as in first screenshot. but i want it to display as in second screenshot. Is there any way to achieve the task?

I'm using following Javascript code to show google map:

<script type="text/javascript">
    var map;
    var infowindow;
    var url = document.URL;
    var id_check = /[?&]park=([^&]+)/i;
    var match1 = id_check.exec(url);
    if (match1 != null) {
        final_id = match1[1];
    } else {
        final_id = "";
    }
    final_id = final_id.replace(/%/g, " ");
    final_id = final_id.replace(/20/g, "");
    var latlong = /[?&]latlong=([^&]+)/i;
    var latlongmatch = latlong.exec(url);
    if (latlongmatch != null) {
        latlong = latlongmatch[1];
    }
    else {
        latlong = "";
    }
    latlong = latlong.replace(/%/g, " ");
    latlong = latlong.replace(/20/g, "");
   // alert(final_id);
    function initialize() {
        var split = latlong.split(',');
        var lat = split[0];
        var long = split[1];
        var loca = new google.maps.LatLng(lat,long);
        map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            travelmode: google.maps.TravelMode.BICYCLING,
            center: loca,
            zoom: 14
        });

        var request = {
            location: loca,
            radius: 10000,
            //name: 'State Game Lands',
            //keyword: 'State Game Lands',
            //type: ['State Game Lands']


        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
    }

    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < 2; i++) {
                alert(results[i].geometry.location.formatted_address);
                createMarker(results[i]);
            }
        }
    }

    function createMarker(place) {
        var split = latlong.split(',');
        var lat = split[0];
        var long = split[1];
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            //position: place.geometry.location

            position: new google.maps.LatLng(lat,long)
        });

        google.maps.event.addListener(marker, 'mouseover', function () {
            infowindow.setContent(final_id);
            infowindow.open(map, this);
            //marker.openInfoWindowHtml(final_id);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

First Screenshot (right now diplaying as this)

Second screenshot (It should display as this)

Answer 1

Set your zoom level and maptype

                    var mapOptions = {
                    center: new google.maps.LatLng(43.653226, -79.3831843),
                        zoom: 14,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

Answer 2

If you want it to show as satellite, just change the line:

mapTypeId: google.maps.MapTypeId.ROADMAP,

to

mapTypeId: google.maps.MapTypeId.SATELLITE,