CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
wwwroth
wwwroth

Reputation: 434

Google Maps v3 Terrain View By Default

I'm trying to make my google maps embed default to terrain view. Attached is my code that loads everything correctly except the map options where I set the default view to terrain. I have it set up to only limit the choices to only terrain but when you initially load the page it is on the default hybrid view.

var map, marker, latLngToPixel;
var middle_earth_MORADOR = new google.maps.LatLng(38, 0);

function initialize() {

    var mapOptions = {
        zoom: 2,
        center: middle_earth_MORADOR,
        backgroundColor: "#000",
         mapTypeControlOptions: {
             mapTypeIds: [google.maps.MapTypeId.TERRAIN]
         },
         mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var locations = [
        // PHP LOOP FOR FEATURED PROJECTS   
    ];

    map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

    var styledMapOptions = {
        map: map,
        name: "map"
    }

    var build =  new google.maps.StyledMapType(styledMapOptions);
    map.mapTypes.set('map', build);
    map.setMapTypeId('map');
    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    for (i = 0; i < locations.length; i++) {    

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            icon: 'http://staging.******.com/css/images/pin.png',
            map: map,
        });

         marker.setAnimation(google.maps.Animation.DROP);
         setTimeout(function(){ marker.setAnimation(null); }, 1750);

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                window.location = "http://staging.******.com/projects/" + locations[i][4];
            }
        })(marker, i));
    }
}

Upvotes: 1

Views: 4261

Answers (2)

Carlos Trujillo
Carlos Trujillo

Reputation: 657

const map = new window.google.maps.Map(document.getElementById('Map'), {  

  mapTypeId: 'terrain'

});

Upvotes: 1

defau1t
defau1t

Reputation: 10619

I think you can disable the default UI of map by setting the property disableDefaultUI to true, and then set in the options the TERRAIN as the mapTypeId as how I did it below:

function loadMap() {
var myLatlng = new google.maps.LatLng(lat,lan);
  var myOptions = {
    zoom: 3,
    center: myLatlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
   map = new google.maps.Map(document.getElementById("map"), myOptions);
//code
}

Upvotes: 3

Related Questions