Open LuisGarridoOgalla opened 6 years ago
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<!-- <h3>SHARINGT</h3>-->
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 36.6515100, lng: -4.538462};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru<!-- centrar el mapa en el punto del maker que hemos creado-->
});
<!--Creacion de un Maker con las coordenadas que tiene uluru-->
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBadl4CIip4qSWVOM5sjG6JgcRMBAREKEg&callback=initMap">
</script>
</body>
</html>>
Código html de un mapa de google maps con un maker, con unas coordenadas especificas, declaradas en la variable urulu. En la var map , se declara el mapa que se dibujará.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<!-- <h3>SHARINGT</h3>-->
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 36.6515100, lng: -4.538462};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">PABLO</h1>'+
'<div id="bodyContent">'+
'<p><b>Libro ofertado: </b>,<b>Crepúsculo</b>'+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
<!--Creacion de un Maker con las coordenadas que tiene uluru-->
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: ' HOLI '
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBadl4CIip4qSWVOM5sjG6JgcRMBAREKEg&callback=initMap">
</script>
</body>
</html>>
Código con descripción en el marker
Enlace de la página de desarrolladores de google, para hacer un proyecto web de un mapa con un maker
https://developers.google.com/maps/documentation/javascript/tutorial