javascript - Can't change the Center of Map according to the address in textbox -
i new in using google map api. wanted create asp.net project using google map api. here can able show desired location populating map database.but having difficulties changing center of map entered in text box. can dynamically latitude & longitude of address , placed image marker on map according text box. doesn't change center of map.
this aspx file
<%@ page language="c#" autoeventwireup="true" codebehind="main2.aspx.cs" inherits="asp_gmap.main2" %> <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>show/add multiple markers google maps database in asp.net website</title> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=aizasydc0pscu_15c1krbw5yornu51uiie6j8k4&sensor=false"> </script> <script type="text/javascript"> var latitude = 22.347537; var longitude = 91.812332; function initialize() { var value=""; var latitude = 22.347537; var longitude = 91.812332; var mymap; var img = 'images/position.png'; var mapoptions; value = document.getelementbyid('<%=textbox1.clientid %>').value; var address = value; //////////to show atm booth var markers = json.parse('<%=datatableloading() %>'); if (value != "") { var geocoder = new google.maps.geocoder(); geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.geocoderstatus.ok) { latitude = results[0].geometry.location.lat(); longitude = results[0].geometry.location.lng(); var marker = new google.maps.marker({ position: { lat: latitude, lng: longitude }, map: map, title: "i here", icon: img }); } }); } mapoptions = { center: new google.maps.latlng(latitude, longitude), zoom: 12, maptypeid: google.maps.maptypeid.roadmap // marker:true }; var infowindow = new google.maps.infowindow(); var map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions); (i = 0; < markers.length; i++) { var data = markers[i] var mylatlng = new google.maps.latlng(data.lat, data.lng); var marker = new google.maps.marker({ position: mylatlng, map: map, title: data.title }); (function(marker, data) { // attaching click event current marker google.maps.event.addlistener(marker, "click", function(e) { infowindow.setcontent(data.description); infowindow.open(map, marker); }); })(marker, data); } } </script> </head> <body onload="initialize()"> <form id="form1" runat="server"> <div> <span>location:</span> <asp:textbox id="textbox1" runat="server"> </asp:textbox> <br /><br /> <asp:button id="button1_seachaddress" runat="server" text="button" onclientclick="initialize()" /> <div id="map_canvas" style="width: 1000px; height: 500px"></div> </div> </form> </body> </html> and code behind....
using system; using system.collections.generic; using system.linq; using system.web; using system.web.ui; using system.web.ui.webcontrols; using system.configuration; using system.data; using system.data.sqlclient; namespace asp_gmap { public partial class main2 : system.web.ui.page { string cs = configurationmanager.connectionstrings["dbcon_string"].connectionstring; protected void page_load(object sender, eventargs e) { } public string datatableloading() { datatable dt = new datatable(); using ( sqlconnection con = new sqlconnection(cs) ) { using (sqlcommand cmd = new sqlcommand("select title=city,lat=latitude,lng=longitude,street,description atmaddress", con)) { con.open(); sqldataadapter da = new sqldataadapter(cmd); da.fill(dt); system.web.script.serialization.javascriptserializer serializer= new system.web.script.serialization.javascriptserializer(); list<dictionary<string, object>> rows = new list<dictionary<string, object>>(); dictionary<string, object> row; foreach (datarow dr in dt.rows) { row = new dictionary<string, object>(); foreach (datacolumn col in dt.columns) { row.add(col.columnname, dr[col]); } rows.add(row); } return serializer.serialize(rows); } } } } } can guys please me find suitable solution problems in code.
you need center map panto.
<script type="text/javascript"> function centermap(lat, lng) { var location = new google.maps.latlng(lat, lng); map.panto(location); } </script> https://developers.google.com/maps/documentation/javascript/reference
there called setcenter. not tested i'm guessing centers map, without scrolling.
Comments
Post a Comment