this html code mainly call google maps and draws a polygon on specific coordinat
ID: 3838754 • Letter: T
Question
this html code mainly call google maps and draws a polygon on specific coordinates . I need someone to fix me this code to make it calculate area and perimeter of the polygon coordinates that i have and make the results appear when the marker at "home"position is clicked.
I removed my api key.
Homework 3
Homework 3
!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Homework 3</title>
<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>
function initMap() {
// Set home coordinates
var home = {lat: 30.038313, lng: 31.211234 }
// Set center of the map
var map = new google.maps.Map(document.getElementById('map'), {
center: home,
zoom: 14,
mapTypeId: 'roadmap'
});
// Set a marker
var marker = new google.maps.Marker({
position: home,
map: map,
title: 'home'
});
// Set zoom in
marker.addListener('click', function() {
map.setZoom(14);
map.setCenter(marker.getPosition());
});
var homecoords = [
{lat: 30.048316, lng: 31.217546},
{lat: 30.062176, lng: 31.213984},
{lat: 30.060635, lng: 31.208652},
{lat: 30.059125, lng: 31.190080},
{lat: 30.044193, lng: 31.193685},
{lat: 30.011602, lng: 31.206688},
{lat: 30.014648, lng: 31.210072},
{lat: 30.015931, lng: 31.216853},
{lat: 30.028603, lng: 31.217259}
];
// Construct the polygon.
var homeneighbourhood = new google.maps.Polygon({
paths: homecoords,
strokeColor: '#800080',
strokeOpacity: 0.5,
strokeWeight: 4,
fillColor: '#800080',
fillOpacity: 0.1
});
homeneighbourhood.setMap(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key= &callback=initMap"
type="text/javascript"></script>
</body>
</html>
Explanation / Answer
<!--“This page didn’t load Google Maps correctly” in place of maps on your website? This error has become a lot more common since Google Maps started requiring an API key on June 22, 2016 (after about 10 years of allowing keyless use). If you started using Google Maps on your website on or after that date then you will need to sign up for and implement a free API
i have genereted key: "AIzaSyANwTpfh1zOROxxz23DaNdRNeitwgMRhqs " .so you need add the that geneted key into your code will that code is worked..
-->
!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Homework 3</title>
<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>
function initMap() {
// Set home coordinates
var home = {lat: 30.038313, lng: 31.211234 }
// Set center of the map
var map = new google.maps.Map(document.getElementById('map'), {
center: home,
zoom: 14,
mapTypeId: 'roadmap'
});
// Set a marker
var marker = new google.maps.Marker({
position: home,
map: map,
title: 'home'
});
// Set zoom in
marker.addListener('click', function() {
map.setZoom(14);
map.setCenter(marker.getPosition());
});
var homecoords = [
{lat: 30.048316, lng: 31.217546},
{lat: 30.062176, lng: 31.213984},
{lat: 30.060635, lng: 31.208652},
{lat: 30.059125, lng: 31.190080},
{lat: 30.044193, lng: 31.193685},
{lat: 30.011602, lng: 31.206688},
{lat: 30.014648, lng: 31.210072},
{lat: 30.015931, lng: 31.216853},
{lat: 30.028603, lng: 31.217259}
];
// Construct the polygon.
var homeneighbourhood = new google.maps.Polygon({
paths: homecoords,
strokeColor: '#800080',
strokeOpacity: 0.5,
strokeWeight: 4,
fillColor: '#800080',
fillOpacity: 0.1
});
homeneighbourhood.setMap(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<strong>AIzaSyANwTpfh1zOROxxz23DaNdRNeitwgMRhqs</strong> &callback=initMap"
type="text/javascript"></script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.