I am working with Google Maps embedded on my webpage. What I want is to create a button click event, so that after a user has entered an address into a textbox (called txtBoxMaps), they can click a button which will display the new location on the same webpage. I tried using: google.maps.event.addListener(map, 'click', function(event) but when I click the button (btnDisplay) nothing happens. I can see the google map but it doesnt change after the "Display" button is clicked. Here is my code below:
.style1
{
width: 104px;
}
.style2
{
width: 144px;
}
#GO
{
width: 92px;
}
#Display
{
width: 113px;
}
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
function Initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.01, 27.9),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('GMap1'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
mapZoom = map.getZoom();
startLocation = event.latLng;
var input = document.getElementById('TextBox1');
});
}
google.maps.event.addDomListener(window, 'load', Initialize);
</script>
<input type="text" id="TextBox1"/>
<input type = "button" id="btnDisplay" value = "Display"/>
