Google Map Type Explanation and Sample Code

2021-07-09 07:08:34
OfStack

Google map type

Google Maps-Basic Map Types

The following map types are available in Google Maps API:

1. MapTypeId. ROADMAP to display the default road map view
2. MapTypeId. SATELLITE for displaying Google Earth satellite pictures
3. MapTypeId. HYBRID for both normal and satellite views
4. MapTypeId. TERRAIN, which is used to display the actual map based on terrain information.

To modify the type of map you are using through Map, you can set the mapTypeId property for it:


var mapProp = {
 center:new google.maps.LatLng(51.508742,-0.120850),
 zoom:7,
 mapTypeId: google.maps.MapTypeId.HYBRID
};

Or dynamically modify mapTypeId:

map.setMapTypeId(google.maps.MapTypeId.HYBRID);

Google map-45 ° image

Google Maps API supports special 45 ° images for specific locations.

Such high-resolution images can provide perspective views towards various basic directions (southeast and northwest). For supported map types, these pictures can also provide higher zoom levels.

Existing map types google. maps. SATELLITE and google. maps. MapTypeId. HYBRID support 45 perspective images with high zoom levels, if any. If the location you zoom in has such an image, these map types will automatically change their views in the following ways:

1. Any existing panning controls on the map will be changed to add a compass wheel around the existing navigation control. You can use the compass to change the direction of any 45 ° image by dragging the compass wheel and aligning the direction with the nearest supported direction that contains the image.

2.1 Rotation controls will be displayed between the existing pan and zoom controls, which can be used to rotate the image around the supported direction. Rotation controls only support clockwise rotation.

3. The 45 perspective image centered on the current position will replace the satellite image or hybrid image. By default, such views face north. If you zoom out the map, the default satellite image or mixed image will be redisplayed on the map.

4. The 4. MapType control enables the submenu switching control for displaying 45 ° images.

Note: Reducing the map type that displays a 45 ° image will restore all changes and rebuild the original map type.

The following example shows a 45 view of the Duke's Palace in Venice, Italy:

Instances


<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(45.434046,12.340284);

function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:18,
 mapTypeId:google.maps.MapTypeId.HYBRID
 };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

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

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Tip: Google is constantly adding 45 images to more cities. For the latest information, see the list of 45 images on the Google map.

Google Maps-45 ° Images Enabled and Disabled-setTilt (0)

You can deactivate the 45 ° image by calling setTilt (0) on the Map object. To enable 45 perspective images for supported map types, call setTilt (45).

Instances


<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(45.434046,12.340284);

function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:18,
 mapTypeId:google.maps.MapTypeId.HYBRID
 };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
map.setTilt(0);
}

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

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

The above is the Google map type of information simple collation and explanation, hoping to help develop Google map friends, follow-up to continue to supplement relevant knowledge, thank you for your support to this site!