I’m trying to learn some new things with Javascript. This time with Google Maps.
I already can place 1 marker with the user input and I can also give the marker a name. The next step that I want to do is that I can place 3 markers (no more than 3) with the same input field and button that I use now.
I’m stuck since 2 days and I already tried some things but I can’t figure it out.
I hope someone can help me with my code, thanks for the effort!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Place marker with name</title>
</head>
<body>
<div >
<h1>Place marker with name</h1>
</div>
<div>
<div>
<div>
<div>
<h2>Place and name marker</h2>
</div>
<div>
<form>
<div>
<div>
Place
<input id="place" type="text">
</div>
<div>
Name Marker<input id="namemarker" type="text">
<div>
<button id="search">search</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div>
<div>
<div>
<h1>MAP</h1>
</div>
</div>
<div>
<div class="divmap"></div>
</div>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
main.js
var posOptions = { enableHighAccuracy: false,
maximumAge: 0,
timeout: 5000
};
/** * Get the current location of the user */
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showLocation, handleError, posOptions);
} else {
console.log ('Not supported');
}
}
/** * Show current location coords of the user *
* @param position object with position info */
function showLocation(position) {
console.log(position.coords.latitude, position.coords.longitude );
}
function handleError(error) {
console.log(error.code, error.message );
}
getLocation();
var marker;
var map;
var namemarker;
var API_KEY = "AIzaSyBHlzEXk1cGO65POSXz_AYW2DDmKuF6Fv4";
var mapScript = document.createElement('script');
mapScript.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key='+API_KEY+'&callback=initMap' );
mapScript.setAttribute('async', '' );
mapScript.setAttribute('defer', '' );
document.querySelector('body').appendChild(mapScript);
function initMap() {
navigator.geolocation.getCurrentPosition(showMap, handleError);
}
var divMap = document.querySelector(".divmap");
function showMap(pos) {
divMap.style.width = '500px';
divMap.style.height = '500px';
map = new google.maps.Map(divMap, {
center:{
lat: pos.coords.latitude,
lng: pos.coords.longitude,
},
zoom: 16
});
marker = new google.maps.Marker({
position: {
lat: pos.coords.latitude,
lng: pos.coords.longitude,},
map:map,
title:namemarker,
});
}
var search = document.querySelector('#search');
search.addEventListener("click", function (ev) {
ev.preventDefault();
showPlace();
},false);
function showPlace() {
var loc = document.querySelector('#place');
namemarker = document.querySelector('#namemarker');
console.log(loc.value);
var reqUrl = "https://maps.googleapis.com/maps/api/geocode/json?address="+loc.value+"&key="+API_KEY;
fetch(reqUrl)
.then(function(response) {
return response.json();
})
.then(function (locJson) {
console.log(locJson);
var pos = locJson.results[0].geometry.location;
map.panTo(pos);
marker.setPosition(pos);
marker.setTitle(namemarker.value);
});
}
