Find it Leaflet
by sarathsprakash
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<div id="map"></div>
<div id='hi'>Place :
<input type="text" id="add" value="" />
<input type="button" id="posbutton" value="Submit" />
</div>
CSS
#map {
height: 180px;
}
#hi {
position:fixed;
}
JavaScript
var map = new L.map('map').setView([10.8793, 76.3148], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.cloudmade.com/37e20e1285f945d393426128dc08749a/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(map);
map.on('contextmenu', function (e) {
var map2 = L.marker(e.latlng).addTo(map);
//this.addControl(map2);
});
// add a marker in the given location, attach some popup content to it and open the popup
var map1 = L.marker([10.8793, 76.3148], {
draggable: true
}).addTo(map).on({
mouseover: function (e) {
this.bindPopup("You are here " + this.getLatLng()).openPopup();
},
mouseout: function () {
this.closePopup();
},
dragend: function (e) {
L.DomUtil.removeClass(map, 'hi')
alert(this.getLatLng());
}
});
var b = L.DomUtil.get('posbutton');
var text1 = L.DomUtil.get('add');
/*L.DomEvent.addListener(text1, 'keyup', function (e) {
var val = this.value;
});*/
L.DomEvent.addListener(b, 'click', function (e) {
var val1 = text1.value;
getajax(val1);
// map1.setView([val1, val2]);
});
function getajax(addr) {
var lat;
var lng;
$.ajax({
type: "GET",
url: "http://maps.googleapis.com/maps/api/geocode/json",
data: {
"address": addr,
"sensor": false // this parameter should be added
},
dataType: 'json',
success: function (response) {
//$("body").append("Address :" + response.results[0].formatted_address);
lat = parseFloat(response.results[0].geometry.location.lat);
lng = parseFloat(response.results[0].geometry.location.lng);
map.panTo([lat, lng], {
animate: true,
duration:...