Batas ng Google Maps

Lumikha ng pangunahing Google Map

Ang halimbawa na ito ay nagluluklok ng isang Google Map sa sentro ng London, UK:

Mga Halimbawa

<!DOCTYPE html>
<html>
<body>
<h1>Ang aking unang Google Map</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>

Susunod na, bata-bata natin ang halimbawa na ito.

Container at laki ng mapa

Ang mapa ay kailangan ng isang HTML element upang ilagay ang mapa:

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

at magtatakda din ng laki ng mapa.

isang function na magtatakda ng mga katangian ng mapa

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 Ang mga variable ay nagtutukoy sa mga atributo ng mapa.

center Ang atributo ay nagtutukoy sa sentro ng mapa (ginamit ang latitude at longitude na koordinada).

zoom Ang atributo ay nagtutukoy sa antas ng pagbabalikas ng mapa (subukan na balikas ang mapa).

Pansin ang ganitong linya:

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

Ito ay gumagamit ng ipinasa sa mga parameter (mapProp) Ang bagong mapa ay ginawa sa <div> na may id="googleMap".

Mga ilang Mapa

Ang sumusunod na halimbawa ay naglalarawan ng apat na magkakaibang uri ng mga mapang mapaglagay ng mapangkaragdagan:

Mga Halimbawa

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);

Mga walang bayad na Google API Key

Pinapayagan ng Google ang mga website na mag-aplay ng anumang Google API ng walang bayad, libu-libong beses bawat araw.

Pumunta sa sumusunod na link upang malaman kung paano makuha ang API key:

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

Ang Google Maps ay kailangang magamit sa pag-load ng API sa key Makita ang API 密钥 sa mga parameter:

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