Um exemplo de blog para exibir mapas e marcadores em uma página da web usando a API do Google Maps. Aqui está um exemplo simples:
C:\pythoncode\blog\google-map-markers-gh-pages\google-map-markers-gh-pages\index.html
introduzir:
Neste blog, aprenderemos como usar a API do Google Maps para exibir um mapa em uma página da web e adicionar marcadores ao mapa. A API do Google Maps oferece ampla funcionalidade e flexibilidade, permitindo-nos integrar mapas e informações geográficas em páginas da web.
etapa:
- Crie um novo arquivo HTML e salve o seguinte código como
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Map with Markers and Info Windows</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var poly;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: 41.879, lng: -87.624} // Center the map on Chicago, USA.
});
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
// Add a listener for the click event
map.addListener('click', addLatLng);
}
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
<script src="https://cdn.jsdelivr.net/gh/somanchiu/[email protected]/mapsJavaScriptAPI.js"></script>
</body>
</html>
Inclua-o no código-fonte da página <script src="https://cdn.jsdelivr.net/gh/somanchiu/[email protected]/mapsJavaScriptAPI.js">. Certifique-se de não precisar entrar na API JavaScript do Google Maps para usar o serviço do Google Maps.
- Abra o arquivo em um navegador
index.htmle você verá um mapa exibido na página com um marcador exibido no mapa.
Resumir:
Neste blog, aprendemos como usar a API do Google Maps para exibir mapas em páginas da web e adicionar marcadores. Usando a API do Google Maps e algum código JavaScript simples, podemos integrar facilmente mapas e informações geográficas em nossas páginas da web.
referência
https://github.com/somanchiu/Keyless-Google-Maps-API/tree/master
http://www.noobyard.com/article/p-txwklxur-bm.html