గూగుల్ మ్యాప్స్ బేసిక్

创建基础的谷歌地图

此例创建以英国伦敦为中心的谷歌地图：

ఉదాహరణ

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个谷歌地图</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
  center: new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>

接下来 ，我们会一步步研究上面这个例子。

地图容器和尺寸

地图需要一个 HTML 元素来存放地图：

<div id="googleMap" style="width:100%;height:400px"></div>

同时还要设置地图的大小。

创建一个函数来设置地图属性

function myMap() {
var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

mapProp మ్యాప్ యొక్క గుణాత్మకాలను నిర్వచించే వెరియబుల్

center కేంద్రం నిర్వచిస్తుంది (అక్షాంశం మరియు దూరం కోవర్గాలను వాడిన కోవర్గాలు).

zoom అత్యాకర్షణ ప్రమాణం నిర్వచిస్తుంది (మ్యాప్ ను స్కూల్ చేయండి).

ఈ వరుసను చూడండి:

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

ఇది పాస్సు చేసిన పారామీటర్లను వాడుతుంది (mapProp) id="googleMap" యొక్క <div> ఎలమెంట్లో కొత్త మ్యాప్ సృష్టించండి.

పలు మ్యాప్స్

క్రింది ఉదాహరణలో నాలుగు వివిధ మ్యాప్ రకాలను నిర్వచించబడింది:

ఉదాహరణ

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

ఉచిత Google API Key

Google వెబ్సైట్లకు ఏదైనా Google API ను ఉచితంగా కాల్ చేయడానికి అనుమతిస్తుంది, రోజుకు వెయ్యి సార్లు కాల్స్ చేయవచ్చు.

ఈ లింకును సందర్శించండి, API key పొందటానికి ఎలా తెలుసుకోవచ్చు తెలుసుకోండి:

https://developers.google.com/maps/documentation/javascript/get-api-key

గూగుల్ మ్యాప్ అపి లోడ్ చేసినప్పుడు దానిలో ఉండాలి: key పారామీటర్లలో ఈ API కీ కనుగొనండి:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>