<!DOCTYPE html>
<html>
<head>
<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 map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.4410744, lng: -3.6187568},
zoom: 15
});
var marker = new google.maps.Marker({
position: {lat: 40.446361599999996, lng: -3.6118527999999994},
map: map,
title: 'Mi Empresa'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaXXXXjgFsJDavU6JD8nbyEkT8i3o&callback=initMap" async defer></script>
</body>
</html>
Que en vez de ocupar toda la web se cargue en un div concreto:
<!DOCTYPE html>
<html>
<body>
<h1>Un poco de HTML encima</h1>
<div id="mapaLSG" style="width:100%;height:400px;"></div>
<script>
function initMap() {
var mapProp = {
center:new google.maps.LatLng(40.4410744,-3.6187568),
zoom:13,
};
var map = new google.maps.Map(document.getElementById("mapaLSG"),mapProp);
var marker = new google.maps.Marker({
position: {lat: 40.446361599999996, lng: -3.6118527999999994},
map: map,
title: 'Mi Empresa'
});
}
</script>
<h1>Aqui debajo mas HTML</h1>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaXXXX8JJmUPajgFsJDavU6JD8nbyEkT8i3o&callback=initMap"></script>
</body>
</html>
Que permita meter una dirección y calcular la ruta desde ese punto hasta nuestro market (antes asegúrate que en https://console.developers.google.com/ tengas habilitadas las API de Places API, Maps Javascript API, Geocoding API y Directions API):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaXXXXzKBgw9hboDblFlodk3aA3J_QXPs0aPs"></script>
</head>
<body>
<h1>Un poco de HTML encima</h1>
<div id="mapaLSG" style="width:100%;height:400px;"></div>
<script>
var map;
var gdir;
var geocoder = null;
var addressMarker;
var marker;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay;
// *********************************
function initMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapProp = {
center:new google.maps.LatLng(40.4410744,-3.6187568),
zoom:13,
};
var map = new google.maps.Map(document.getElementById("mapaLSG"),mapProp);
var marker = new google.maps.Marker({
position: {lat: 40.446361599999996, lng: -3.6118527999999994},
map: map,
title: 'Mi Empresa'
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
// ****************************
function calcRoute(irDe, irA) {
var start = irDe;
var end = irA;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
/*marker.setMap(null);*/
$('#directionsPanelContainer').css('display', 'block');
}
// *********************************
function CalcRutaVerificarTecla(e, f){
tecla = (document.all) ? e.keyCode : e.which;
if((tecla == 13)){
//abrir_ruta(f);
setDirections(document.forms['form-mapa'].from.value, document.forms['form-mapa'].to.value, document.forms['form-mapa'].locale.value);
return false;
}
}
</script>
<form action="" id="form-mapa" action="" method="post" class="col-md-12">
<input type="hidden" id="toAddress" name="to" value="Calle de Alcalá, 540, 28037 Madrid" />
<input type="hidden" id="locale" name="locale" value="es"/>
<input type="hidden" id="locale" name="calcular_ruta" value="1"/>
<input type="hidden" name="ubicacion" value="xxxx" />
<p class="section-title color-navy text-center"><strong> Calcula tu ruta,<br>como llegar desde... </strong> </p>
<div class="form-group">
<input class="form-control" style="height:42px;" id="fromAddress" name="from" type="text" placeholder="¿Cuál es tu dirección?"
onkeypress="javascript:return CalcRutaVerificarTecla(event, document.forms['form-mapa'])" value="" required>
</div><!--form-group-->
<div class="form-group">
<button type="button" class="btn btn-default btn-block"
onclick="javascript:calcRoute(document.forms['form-mapa'].from.value, document.forms['form-mapa'].to.value, document.forms['form-mapa'].locale.value);"
value="Calcular ruta">CALCULAR RUTA</button>
</div><!--form-group-->
</form>
<h1>Aqui debajo mas HTML</h1>
<script>
$(function() {
initMap();
});
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario