Created
June 21, 2017 04:09
-
-
Save lokialice/130d9205d589a110cfcc22af6268221f to your computer and use it in GitHub Desktop.
how to get a user input in google maps using custom controls?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function initialize() { | |
var myMapOptions = { | |
zoom: 8, | |
center: new google.maps.LatLng(-34.397, 150.644), | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}; | |
var map = new google.maps.Map(document.getElementById('map_canvas'), myMapOptions); | |
// Create a div to hold everything else | |
var controlDiv = document.createElement('DIV'); | |
controlDiv.id = "controls"; | |
// Create an input field | |
var controlInput = document.createElement('input'); | |
controlInput.id = "some-information"; | |
controlInput.name = "some-information"; | |
controlInput.value = "Hi there!"; | |
// Create a label | |
var controlLabel = document.createElement('label'); | |
controlLabel.innerHTML = 'Some information'; | |
controlLabel.setAttribute("for","some-information"); | |
// Create a button to send the information | |
var controlButton = document.createElement('a'); | |
controlButton.innerHTML = 'Send it!'; | |
// Append everything to the wrapper div | |
controlDiv.appendChild(controlLabel); | |
controlDiv.appendChild(controlInput); | |
controlDiv.appendChild(controlButton); | |
var onClick = function() { | |
var inputvalue = $("#some-information").val(); | |
alert("You entered: '" + inputvalue + "', map center is at " + map.getCenter()); | |
}; | |
google.maps.event.addDomListener(controlButton, 'click', onClick); | |
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv); | |
} | |
jQuery(document).ready(initialize); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> | |
<div id="map_canvas"></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment