Google Maps grundlæggende

Opret grundlæggende Google-kort

Dette eksempel opretter et Google-kort centreret i London, Storbritannien:

Example

<!DOCTYPE html>
<html>
<body>
<h1>Min første Google-kort</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>

Næste, vil vi trin for trin undersøge det ovennævnte eksempel.

Kortcontainer og størrelse

Kortet har brug for et HTML-element til at gemme kortet:

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

samt indstille kortets størrelse.

opret en funktion til at indstille kortets egenskaber

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 Variables define the properties of the map.

center The property specifies the center position of the map (using latitude and longitude coordinates).

zoom The property specifies the zoom level of the map (try zooming in on the map).

Please see this line:

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

It uses the passed parameters (mapProp) Create a new map within the <div> element with id="googleMap".

Multiple Maps

The following example defines maps of four different map types:

Example

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

Free Google API Key

Google allows websites to call any Google API for free, thousands of times a day.

Please visit the following link to learn how to obtain an API key:

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

Google Maps needs to be loaded with the API key in: key Find this API key in the parameters:

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