Google Map embed Api
Google Map Embed API With Address Input Form
Gebe deine Stadt ein und du bekommst ein embed Code zurück
Der hier verwendete Code
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
/*Various edits stop bootstrap*/
p, li {
font-size: 1em !important;
line-height: 1.15 !important;
margin: 10px 0 0 0 !important;
}
p.btn {
margin-top: 1em;
display: inline-block;
}
.container.body-content {
padding: 8px 0;
width: 90%;
margin: 0 auto;
}
label, input, button {
display: block;
}
input[type="text"]{
padding: 10px;
width: 100%;
}
button {
margin: 10px 0 !important;
padding: 10px 20px;
}
#error-msg {
color: #C50707;
}
table {
margin-top: -20px;
th {
color: white;
padding: 10px;
&.type {
background-color: #65686C;
}
&.std-prem {
background-color: #6DA6F3;
}
}
td {
padding: 10px;
border-bottom: 1px solid #000;
vertical-align: top;
p {
margin: 0;
}
a {
color: #666 !important;
}
&.type {
background-color: #ccc;
color: black;
width: 30%;
}
&.std-prem {
background-color: #E5F3FE;
color: black;
}
}
}
.container .jumbotron {
padding: 10px;
h1 {
font-size: 45px !important;
margin: 0 0 10px 0;
}
p {font-size: 14px;}
}
/*Map Styling*/
#map-canvas{
border: groove 3px #ccc;
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div class="container body-content">
<div class="jumbotron">
<h1>Google Map Embed API</h1>
<p class="lead">This example was developed to determine if we could produce a map based on the input of an address. Google Static Maps now has usage limits and requires a premium for traffic beyond x number of hits. The Google Maps Embed API allows us to place an interactive map with a simple HTTP request.</p>
<p><strong>Notes:</strong></p>
<ul>
<li>It remains unclear if the Embed API is free or not. In some documentation it appears that as long as your site is generally accessible to consumers without charge, you may use the Google Maps APIs. However, if your site is only available to paying customers you must purchase the appropriate Google Maps API for Work license. <a href="https://developers.google.com/maps/pricing-and-plans/#details">See Pricing and Plans</a>.</li>
<li>The free version of Google Maps Embed API may include on-map advertising. The ad format and the set of ads shown in any given map may change without notice.</li>
<li>There are no usage limits for the Google Maps Embed API. You can embed maps or Street View panoramas on your high-traffic websites without fear of hitting a usage quota.</li>
<li>All requests to the Google Maps Embed API must include a free API key as the value of a key parameter. This key enables you to monitor your application's Maps API usage, and ensures that Google can contact you about your website/application if necessary. </li>
</ul>
<p class="btn"><a href="https://developers.google.com/maps/documentation/embed/guide" class="btn btn-primary btn-lg">Learn more: Embed API »</a></p>
</div>
<form action="#" onsubmit="showAddress(this.address.value); return false">
<div class="row">
<div class="col-md-6">
<label for="address">Address</label>
<input id="address" type="text" placeholder="Enter an address" />
<button type="button" id="submit">Locate!</button>
<p id="error-msg"></p>
</div>
<div class="col-md-6 the-map">
<iframe id="map-canvas" src="" allowfullscreen></iframe>
</div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
var q = "";
var linkKey = "https://www.google.com/maps/embed/v1/search?key=AIzaSyBK73HewkhHBVVs9nI98-HY_N7cZM_kdjE"
var zoom = 14;
var defaultLoc = "New York, NY"
//Get users geolocation
if (navigator.geolocation) {
q = navigator.geolocation.getCurrentPosition(handleGetCurrentPosition, onError);
function handleGetCurrentPosition(location) {
location.coords.latitude;
location.coords.longitude;
}
function onError() {
q = defaultLoc;
}
}
//Set initial map based on user geolocation or NY, NY
var srcContent = linkKey + "&q=" + q + "&zoom=" + zoom;
$("#map-canvas").attr("src", srcContent);
//Change map based on user input in textbox and a click or enter key submission.
$(function () {
$('#submit').on('keypress click', function (e) {
if ($('#address').val().length === 0) {
q = defaultLoc;
}
else {
q = $('#address').val();
}
srcContent = linkKey + "&q=" + q + "&zoom=" + zoom;
if (e.which === 13 || e.type === 'click') {
$("#map-canvas").attr("src", srcContent);
}
});
});
</script>
</body>