Button click event in Google Maps
-
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"/> -
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"/>You have to divide the functions in 2 or 3 parts Initilize, drawMap And then call drawMap on the button click
function intialize() {
drawMap();
}
function drawMap() {
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'); });
}