Βασικές Google Maps

Δημιουργία βασικής Google Χάρτης

Αυτό το παράδειγμα δημιουργεί μια Google Χάρτη κεντρική στο Λονδίνο της Αγγλίας:

Παράδειγμα

<!DOCTYPE html>
<html>
<body>
<h1>Η πρώτη μου Google Χάρτης</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) Δημιουργήστε ένα νέο χάρτη μέσα στο στοιχείο <div> με id="googleMap".

Πολλαπλοί Χάρτες

Το παρακάτω παράδειγμα ορίζει τέσσερις διαφορετικούς τύπους χαρτών:

Παράδειγμα

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

Το Google Maps πρέπει να φορτώσει το API key Στο παράμετρο βρήκαμε το κλειδί API:

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