<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 300px;
width: 300px;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<input type="text" name="pincode" id="pincode">
<button type="button" id="getLocationbtn"> Get Location</button>
<script>
// var marker;
// var map;
// navigator.geolocation.getCurrentPosition(showPosition);
// function initMap() {
// map = new google.maps.Map(document.getElementById('map'), {
// center: { lat: -34.397, lng: 150.644 },
// zoom: 8
// });
// }
// marker = new google.maps.Marker({
// map,
// });
// $.ajax({
// url: 'https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyDRhAqJg1_2d1jLVF3UidyeroO_JbaKXP0&callback=initMap&address=411041&sensor=false',
// type:'get',
// success:function(res)
// {
// console.log(res);
// }
// });
// function httpGet() {
// let xmlHttpReq = new XMLHttpRequest();
// let pincode=document.getElementById('pincode').value;
// let theUrl='https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyDRhAqJg1_2d1jLVF3UidyeroO_JbaKXP0&callback=initMap&address='+pincode+'&sensor=false';
// xmlHttpReq.open("GET", theUrl, false);
// xmlHttpReq.send(null);
// map.setCenter(JSON.parse(xmlHttpReq.responseText).results[0].geometry.location);
// marker.setCenter(JSON.parse(xmlHttpReq.responseText).results[0].geometry.location);
// marker.setPosition(JSON.parse(xmlHttpReq.responseText).results[0].geometry.location);
// marker.setMap(map);
// // console.log();
// initMap()
// }
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// @ts-nocheck TODO remove when fixed
let map;
let marker;
let geocoder;
let responseDiv;
let response;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: { lat: -34.397, lng: 150.644 },
mapTypeControl: false,
});
geocoder = new google.maps.Geocoder();
const inputText = document.getElementById("#pincode");
console.log(inputText);
// inputText.type = "text";
// inputText.placeholder = "Enter a location";
const submitButton = document.getElementById("#getLocationbtn");
// submitButton.type = "button";
// submitButton.value = "Geocode";
// submitButton.classList.add("button", "button-primary");
const clearButton = document.createElement("input");
clearButton.type = "button";
clearButton.value = "Clear";
clearButton.classList.add("button", "button-secondary");
response = document.createElement("pre");
response.id = "response";
response.innerText = "";
responseDiv = document.createElement("div");
responseDiv.id = "response-container";
responseDiv.appendChild(response);
const instructionsElement = document.createElement("p");
marker = new google.maps.Marker({
map,
});
map.addListener("click", (e) => {
geocode({ location: e.latLng });
});
// submitButton.addEventListener("click", () =>
// geocode({ address: inputText.value })
// );
document.getElementById("getLocationbtn").onclick = function() {
geocode({ address:document.getElementById("pincode").value});
};
clearButton.addEventListener("click", () => {
clear();
});
clear();
}
function clear() {
marker.setMap(null);
responseDiv.style.display = "none";
}
function geocode(request) {
clear();
geocoder
.geocode(request)
.then((result) => {
const { results } = result;
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
// map.zoom(4);
marker.setMap(map);
// responseDiv.style.display = "block";
// response.innerText = JSON.stringify(result, null, 2);
return results;
})
.catch((e) => {
alert("Geocode was not successful for the following reason: " + e);
});
}
window.initMap = initMap;
// console.log(httpGet());
</script>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap"
async defer></script>
</body>
</html>
No comments:
Post a Comment