cfone/app/home/templates/maps-google.html
2021-09-22 23:46:35 -04:00

74 lines
1.8 KiB
HTML

{% extends "layouts/base.html" %}
{% block title %} Google Maps {% endblock %}
<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}
{% block content %}
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Google Maps</h1>
<div class="row">
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Default Map</h5>
<h6 class="card-subtitle text-muted">Displays the default road map view.</h6>
</div>
<div class="card-body">
<div class="content" id="default_map" style="height: 300px;"></div>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Hybrid Map</h5>
<h6 class="card-subtitle text-muted">Displays a mixture of normal and satellite views.</h6>
</div>
<div class="card-body">
<div class="content" id="hybrid_map" style="height: 300px;"></div>
</div>
</div>
</div>
</div>
</div>
</main>
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
function initMaps() {
var defaultMap = {
zoom: 14,
center: {
lat: 40.712784,
lng: -74.005941
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
new google.maps.Map(document.getElementById("default_map"), defaultMap);
var hybridMap = {
zoom: 14,
center: {
lat: 40.712784,
lng: -74.005941
},
mapTypeId: google.maps.MapTypeId.HYBRID
};
new google.maps.Map(document.getElementById("hybrid_map"), hybridMap);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA-aWrwgr64q4b3TEZwQ0lkHI4lZK-moM4&callback=initMaps" async defer></script>
{% endblock javascripts %}