in onclientclick of button in asp.net application, call function show jqueryui dialog google map inside. works first time. but, second time, map seems blank gray background, but, every other controls inside map shown. code. there method dispose map on close, can reload map again on next button click.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script> function loadmap() { var currentmapposition = new google.maps.latlng($('#<%=txlatitude.clientid %>').val(), $('#<%= txlongitude.clientid %>').val()); var mapoptions = { center: currentmapposition, zoom: 14, maptypeid: google.maps.maptypeid.roadmap }; var infowindow = new google.maps.infowindow(); var latlngbounds = new google.maps.latlngbounds(); var map = new google.maps.map(document.getelementbyid("gmap-dialog"), mapoptions); var marker = new google.maps.marker({ position: currentmapposition, map: map, title: 'subproject location' }); //collects new location, , closing dialog on click google.maps.event.addlistener(map, 'click', function (e) { var latitude = e.latlng.lat(); var longitude = e.latlng.lng(); var marker = new google.maps.marker({ position: e.latlng, map: map, title: 'subproject location' }); // center of map map.panto(new google.maps.latlng(latitude,longitude)); $('#<%= txlatitude.clientid %>').val(e.latlng.lat() ) ; $('#<%= txlongitude.clientid %>').val(e.latlng.lng() ) ; $("#gmap-dialog").dialog('close'); }); $("#gmap-dialog").dialog('open'); } </script> the problem same live demo. if load map second time, gray. checked in chrome, ie, , firefox.
i found out answer. problem initializing map object more once. globally declared map variable, , initialized once using condition, , it's working now.
var map = ''; function loadmap() { var currentmapposition = new google.maps.latlng($('#<%=txlatitude.clientid %>').val(), $('#<%= txlongitude.clientid %>').val()); var mapoptions = { center: currentmapposition, zoom: 14, maptypeid: google.maps.maptypeid.roadmap }; var infowindow = new google.maps.infowindow(); var latlngbounds = new google.maps.latlngbounds(); if(!map){ map = new google.maps.map(document.getelementbyid("gmap-dialog"), mapoptions); } else{ map.setoptions(mapoptions); } var marker = new google.maps.marker({ position: currentmapposition, map: map, title: 'subproject location' }); google.maps.event.addlistener(map, 'click', function (e) { var latitude = e.latlng.lat(); var longitude = e.latlng.lng(); var marker = new google.maps.marker({ position: e.latlng, map: map, title: 'subproject location' }); // center of map map.panto(new google.maps.latlng(latitude,longitude)); $('#<%= txlatitude.clientid %>').val(e.latlng.lat() ).attr('class', 'modified-textbox'); $('#<%= txlongitude.clientid %>').val(e.latlng.lng() ).attr('class', 'modified-textbox'); $('#<%= savebutton.clientid %>').attr('class', 'save-button'); $("#gmap-dialog").dialog('close'); }); $("#gmap-dialog").dialog('open'); } 
Comments
Post a Comment