Interactive Google Map

JavaScript
1

I am the event manager for an Amateur Radio event. I would like to create an interactive where the user can input their callsign and category and place a marker on the google map.

MyGoogle maps will not work for this application as not everyone has a Google account.

I have been able to place a marker on the map but after I try to input a callsign or category using an "input’ the information is not being transferred to google map function.

Understand, I am a newbie at code.
Here is my code except for my Google API. Thanks in advance and please take it easy on me. I’m trying to learn

WFD Locator 
</head>

<body>
<script src="https://maps.googleapis.com/maps/api/js?
	key=Google API&callback=myMap"></script>
	
</body>
</html>	var myCall = document.getElementById('callsign');
var myCat = document.getElementById('category');


function myMap() {

	var mapCanvas = document.getElementsbyId("map");
	var myCenter = new.google.maps.LatLng(51.508742, -0.120850);
	var mapOptions = { center: myCenter, zoom: 5 };
	var map = new.google.maps.Map(mapCanvas, mapOptions);
	goole.maps.event.addListener(map, 'click', function (event) { placeMarker(map, event.latlng);
	});
	}
	
funtion placeMarker(map, location) {

	var marker = new.google.maps.Marker({
		position: location,
		map: map
	});
	
	var infowindow = new.google.maps.InfoWindow({
		content: 'Latitude: ' + location.lat() + '<br>Longitude: ' +
		location.lng() + '<br>Callsign: ' + myCall + '<br>Category; ' + myCat
	});
	inforwindow.open(map, marker);
}
</script>

</head>

<body>
<script src="https://maps.googleapis.com/maps/api/js?
	key=google api"></script>
	
</body>
</html>
2

You’re appending the element to the string, not its value (the text).

3

Thanks for the reply. All my code did not appear in original post. So I’ll try it again.

Like I said, I’m a newbie and haven’t had much luck from other resources on the web. Any help would be greatly appreciated.

4 
<!DOCTYPE html>
<html>
<head> WFD Locator

<div id="map" style="width:100%;height:500px;"></div>

<script>

<form>

	Callsign:<br>
	<input id="callsign" type="text"><br>;
	Category:<br>
	<input id="category" type="text"
	<input type="submit" value="submit"
</form>

	var myCall = document.getElementById('callsign').value;
	var myCat = document.getElementById('category').value;
	
	
	function myMap() {
	
		var mapCanvas = document.getElementsbyId("map");
		var myCenter = new.google.maps.LatLng(51.508742, -0.120850);
		var mapOptions = { center: myCenter, zoom: 5 };
		var map = new.google.maps.Map(mapCanvas, mapOptions);
		goole.maps.event.addListener(map, 'click', function (event) { placeMarker(map, event.latlng);
		});
		}
		
	funtion placeMarker(map, location) {
	
		var marker = new.google.maps.Marker({
			position: location,
			map: map
		});
		
		var infowindow = new.google.maps.InfoWindow({
			content: 'Latitude: ' + location.lat() + '<br>Longitude: ' +
			location.lng() + '<br>Callsign: ' + myCall + '<br>Category; ' + myCat
		});
		inforwindow.open(map, marker);
	}
	</script>
	
	</head>
	
	<body>
	<script src="https://maps.googleapis.com/maps/api/js?
		key=Google Api&callback=myMap"></script>
		
	</body>
	</html>
5

Try some of the FCC curriculum, you’re doing several mistakes. Head is like an envelope, not meant for the content. The call sign and co need to be looked up in the function using them.