Carte Google vide lorsqu'elle est utilisée avec le gabarit

Question

J'ai écrit une page de recherche google map. Everthing a bien fonctionné jusqu'à ce que j'ai référencé la page pour utiliser une page maître. J'ai supprimé la balise de formulaire de la page maîtresse car le bouton de recherche sur la page de carte est un bouton d'envoi. Tout le reste sur ma page s'affiche, mais la carte google s'affiche avec les commandes de navigation et le logo, mais aucun visuel de carte n'apparaît.

J'ai réanalysé avec la version de la page non maîtresse précédente et la carte s'affiche correctement. Des pensées sur ce qui me manque?

Answer 1

S'il vous plaît vue ci-dessous Code et laissez-moi savoir ... Il est utile

code MasterPage (page GMap.master)

< body onload="initialize()" onunload="GUnload()" > 
< form id="form1" runat="server" > 
    <div> 
     < asp:contentplaceholder id="ContentPlaceHolder1" runat="server" > 
     </asp:contentplaceholder> 
    </div> 
    </form> 
</body> 

GMatTest.aspx page qui est utilisé la page GMap.Master

< %@ Page Language="C#" MasterPageFile="~/MasterPages/GMap.master" AutoEventWireup="true" 
    CodeFile="GMapTest.aspx.cs" Inherits="GMapTest" Title="Google Map Page" % > 


< asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server" > 


    < script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=< % = AppConfig.GoogleMapApiKey % >" 
     type="text/javascript" ></script> 

    < script type="text/javascript" > 

    var map = null; 
    var geocoder = null; 
    var latsgn = 1; 
    var lgsgn = 1; 
    var zm = 0; 
    var marker = null;  

    function initialize() 
    { 
     if (GBrowserIsCompatible()) 
     { 
     var latitude= ""; 
     var longitude= ""; 

     map = new GMap2(document.getElementById("map_canvas")); 


     var center = new GLatLng(0,0); 
     map.setCenter(center, 17); 

     map.addControl(new GLargeMapControl()); 
     map.addControl(new GScaleControl()); 
     map.enableScrollWheelZoom(); 

     map.addControl(new GMapTypeControl()); 

     map.enableDoubleClickZoom(); 

     marker = new GMarker(center,{draggable: true}); 

     geocoder = new GClientGeocoder(); 


     GEvent.addListener(marker, "dragend", function() { 
     var point = marker.getLatLng(); 
     marker.openInfoWindowHtml("Latitude: " + point.y + "</br> Longitude: " + point.x ); 
     }); 

     GEvent.addListener(marker, "click", function() { 
     var point = marker.getLatLng();   

     }); 


     map.addOverlay(marker); 
     GEvent.trigger(marker, "click"); 

     if (latitude > 0 && longitude > 0) 
     { 
     } 
     else 
     {  

      showAddress(); 

     } 
     } 
    } 

Ci-dessous porsion est donc continuer s'il vous plaît copier aussi

function showAddress() 
{ 
    var isAddressFound=false; 
    var companyAddress = ''; 
    var address='satyam mall, vastrapur, ahmedabad, gujrat, india'; 
    if (geocoder) 
    { 
     geocoder.getLatLng(address,function(point) { 
          if (!point) { 
          alert(address + " not found"); 

          } else { 
           isAddressFound =true; 
          map.setCenter(point,17); 
          zm = 1; 
          marker.setPoint(point); 
          GEvent.trigger(marker, "click"); 
          } 
         } 
     ); 



//If address not found then redirect to company address 

    if(!isAddressFound) 
    {  
     geocoder.getLatLng(companyAddress, 
     function(point) { 
     if (!point) { 
     } else { 
      isAddressFound =true; 
     map.setCenter(point,17); 
     zm = 1; 
     marker.setPoint(point); 
     GEvent.trigger(marker, "click"); 
     } 
     } 
     ); 
    } 
} 
} 
</script> 

< div id="map_canvas" style="width: 100%; height: 425px" > 
</div> 
</asp:Content> 

Answer 2

Une chose qui peut changer lorsque vous ajoutez une page maître est l'ID de vos éléments.

Si la division à laquelle vous affichez la carte contient runat="server", vous risquez d'avoir un problème. Vous ajouteriez cette balise pour pouvoir manipuler la div depuis le code-behind.

Alors, si mon div ressemble à ceci:

<div id="gmap" runat="server"></div> 

Si oui, quand vous initialisez votre carte, vous devez obtenir le ClientId du div. Cela ressemblerait à ceci:

var mapDiv = '<%= gmap.ClientID %>'; 
var map = new GMap2(mapDiv); 

Answer 3

Chargez FireFox et FireBug, commencer à chercher des erreurs javascript. Un élément que j'ai trouvé, vous devez appeler setCenter sur la carte pour qu'il s'affiche. De même, si vous ajoutez des marqueurs (ou des calques), vous devez ajouter le marqueur après avoir appelé setCenter.

Answer 4

a fini par devoir forcer la div visible

Voir ce sujet sur les forums de support Google Maps:

http://groups.google.com/group/Google-Maps-Troubleshooting/browse_thread/thread/0d27b66eef5f5d9e/1259a2991412f796?lnk=raot

Merci !!

Answer 5

c'est le code i used.it fonctionne très bien ici, mais chaque fois que j'ajouter la page principale, il ne fonctionne pas toutes les fonctionnalités d'utilisation

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
     <title>Find latitude and longitude with Google Maps</title> 
     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPkZq56tNYNmeuZjNQQ2p3hT0NZP-HbfQNNfWb9Z5SLbjZKYKwBTrGBqtttFmF2d-kWv2B2nqW_NyEQ" 
     type="text/javascript"></script> 
    <script type="text/javascript"> 

function load() { 
     if (GBrowserIsCompatible()) { 
     var map = new GMap2(document.getElementById("map")); 
     map.addControl(new GSmallMapControl()); 
     map.addControl(new GMapTypeControl()); 
     var center = new GLatLng(48.89364,  2.33739); 
     map.setCenter(center, 15); 
     geocoder = new GClientGeocoder(); 
     var marker = new GMarker(center, {draggable: true}); 
     map.addOverlay(marker); 
     document.getElementById("lat").innerHTML = center.lat().toFixed(6); 
     document.getElementById("lng").innerHTML = center.lng().toFixed(6); 

     GEvent.addListener(marker, "dragend", function() { 
     var point = marker.getPoint(); 
      map.panTo(point); 
     document.getElementById("lat").innerHTML = point.lat().toFixed(6); 
     document.getElementById("lng").innerHTML = point.lng().toFixed(6); 

     }); 


    GEvent.addListener(map, "moveend", function() { 
      map.clearOverlays(); 
    var center = map.getCenter(); 
      var marker = new GMarker(center, {draggable: true}); 
      map.addOverlay(marker); 
      document.getElementById("lat").innerHTML = center.lat().toFixed(6); 
     document.getElementById("lng").innerHTML = center.lng().toFixed(6); 


    GEvent.addListener(marker, "dragend", function() { 
     var point =marker.getPoint(); 
     map.panTo(point); 
     document.getElementById("lat").innerHTML = point.lat().toFixed(6); 
     document.getElementById("lng").innerHTML = point.lng().toFixed(6); 

     }); 

     }); 

     } 
    } 

     function showAddress(address) { 
     var map = new GMap2(document.getElementById("map")); 
     map.addControl(new GSmallMapControl()); 
     map.addControl(new GMapTypeControl()); 
     if (geocoder) { 
     geocoder.getLatLng(
      address, 
      function(point) { 
      if (!point) { 
       alert(address + " not found"); 
      } else { 
      document.getElementById("lat").innerHTML = point.lat().toFixed(6); 
     document.getElementById("lng").innerHTML = point.lng().toFixed(6); 
     map.clearOverlays() 
      map.setCenter(point, 14); 
    var marker = new GMarker(point, {draggable: true}); 
     map.addOverlay(marker); 

     GEvent.addListener(marker, "dragend", function() { 
     var pt = marker.getPoint(); 
     map.panTo(pt); 
     document.getElementById("lat").innerHTML = pt.lat().toFixed(6); 
     document.getElementById("lng").innerHTML = pt.lng().toFixed(6); 
     }); 


    GEvent.addListener(map, "moveend", function() { 
      map.clearOverlays(); 
    var center = map.getCenter(); 
      var marker = new GMarker(center, {draggable: true}); 
      map.addOverlay(marker); 
      document.getElementById("lat").innerHTML = center.lat().toFixed(6); 
     document.getElementById("lng").innerHTML = center.lng().toFixed(6); 

    GEvent.addListener(marker, "dragend", function() { 
    var pt = marker.getPoint(); 
     map.panTo(pt); 
    document.getElementById("lat").innerHTML = pt.lat().toFixed(6); 
     document.getElementById("lng").innerHTML = pt.lng().toFixed(6); 
     }); 

     }); 

      } 
      } 
     ); 
     } 
    } 
    </script> 
    </head> 


<body onload="load()" onunload="GUnload()" > 

<p>This page uses the Google Maps API to find out accurate geographical coordinates (latitude and longitude) for any place on Earth. <br/>It provides two ways to search, either by moving around the map and zooming in, or by typing an address if the place is unknown.<br/> 
<i> 
    <p> The default location and address are those of Mondeca office in Paris.<br /> 
    <p><b> Find coordinates by moving around the map</b></p> <p>1. Drag and drop the map to broad location. <br/> 
    2. Zoom in for greater accuracy. <br/> 
    3. Drag and drop the marker to pinpoint the place. The coordinates are refreshed at the end of each move. </p> 

    <form action="#" onsubmit="showAddress(this.address.value); return false"> 
    <p>   
     <input type="text" size="60" name="address" value="3 cit&eacute; Nollez Paris France" /> 
     <input type="submit" value="Search!" /> 
     </p> 
    </form> 

<p align="left"> 

<table bgcolor="#FFFFCC" width="300"> 
    <tr> 
    <td width="100"><b>Latitude</b></td> 
    <td id="lat"></td> 
    </tr> 
    <tr> 
    <td width="100"><b>Longitude</b></td> 
    <td id="lng"></td> 
    </tr> 
</table> 
</p> 
    <p> 
    <div align="center" id="map" style="width: 600px; height: 400px"><br/></div> 
    </p> 
    </body> 
</html> 

Answer 6

le code i utilisé est

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <META NAME="AUTHOR" CONTENT="Rakshith Krishnappa"> 
    <META NAME="DESCRIPTION" CONTENT="KML Tool - Get Latitude and Longitude for KML Polyline"> 
    <META NAME="KEYWORDS" CONTENT="Google, maps, mashup, tools, kml, polyline"> 
    <META NAME="ROBOTS" CONTENT="ALL"> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
    <title>Mapmash | Geocoder Tool | Geocode - Reverse Geocode - IP Geocode</title> 
    <%--<style type="text/css"> 
    <!-- 
     html { 
     height: 100%; width:100%;overflow:hidden; 
     } 
     body { 
     background-color: white; 
     font-family: Arial, sans-serif; 
     font-size:10pt 
    } 
    h1 { 
    font-size: 18pt; 
    } 
     #map { 
     height: 100%; 
      } 
    #hand_b { 
     width:31px; 
     height:31px; 
     background-image: url(http://google.com/mapfiles/ms/t/Bsu.png); 
    } 
    #hand_b.selected { 
     background-image: url(http://google.com/mapfiles/ms/t/Bsd.png); 
    } 

    #placemark_b { 
     width:31px; 
     height:31px; 
     background-image: url(http://google.com/mapfiles/ms/t/Bmu.png); 
    } 
    #placemark_b.selected { 
     background-image: url(http://google.com/mapfiles/ms/t/Bmd.png); 
    } 

    #line_b { 
     width:31px; 
     height:31px; 
     background-image: url(http://google.com/mapfiles/ms/t/Blu.png); 
    } 
    #line_b.selected { 
     background-image: url(http://google.com/mapfiles/ms/t/Bld.png); 
    } 

    #shape_b { 
     width:31px; 
     height:31px; 
     background-image: url(http://google.com/mapfiles/ms/t/Bpu.png); 
    } 
    #shape_b.selected { 
     background-image: url(http://google.com/mapfiles/ms/t/Bpd.png); 
    }   
    --> 
    </style> 
    <style type="text/css"> 
    v\:* { 
     behavior:url(#default#VML); 
    } 
    </style>--%> 
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAPkZq56tNYNmeuZjNQQ2p3hT0NZP-HbfQNNfWb9Z5SLbjZKYKwBTrGBqtttFmF2d-kWv2B2nqW_NyEQ"></script> 
    <script type="text/javascript"> 
     google.load("maps", "2"); 
    </script> 
    <script src="dragzoom.js" type="text/javascript"></script> 
    <script src="http://adserver.lat49.com/lat49/v0.10/lat49.js" type="text/javascript"></script> 
    <!-- Start of Google Analytics Code --> 
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
    </script> 
    <script type="text/javascript"> 
    _uacct = "UA-2417064-1"; 
    urchinTracker(); 
    </script> 
    <!-- End of Google Analytics Code --> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    //rakf1 modified code taken from these 2 sources: - http://www.gorissen.info/Pierre/maps/googleMapLocationv4.php and - Distance Measurement Tool - Google Mapplets 
    // argItems code taken from 
    // http://www.evolt.org/article/Javascript_to_Parse_URLs_in_the_Browser/17/14435/?format=print 

    var map; 
    var coordinates = ''; 
    var geocoder = new GClientGeocoder(); 
    var added = 0; 
    var marker; 

    function write_point() { 
     var position = marker.getPoint(); 
     var lat = position.y.toFixed(6); 
     var lng = position.x.toFixed(6); 

     coordinates = lng + "," + lat + "\n"; 
     document.getElementById("attribute").value = 'lat="'+lat+'" lng="'+lng+'"'; 
     document.getElementById("latlng").value = '<lat>'+lat+'</lat>\n<lng>'+lng+'</lng>'; 
     document.getElementById("kml").value = lng+','+lat; 
     document.getElementById("coord").value = marker.getPoint().toUrlValue();    
    } 

    function get_address1() { 
     GEvent.addListener(marker, "click", function(){ 
      var position = marker.getPoint(); 
      var lat = position.y.toFixed(6); 
      var lng = position.x.toFixed(6); 
      var html = 'FreeReverseGeo.com (~address):<br><iframe id="RSIFrame" name="RSIFrame" style="overflow:hidden; width:200px; height:55px; border: 1px" src="http://www.freereversegeo.com/gmap-api.php?lat_1=' + lat + '&lng_1=' + lng + '"></iframe><br>('+lat+','+lng+')'; 
      marker.openInfoWindowHtml(html);      
     });  
    } 

    function get_address() { 
     GEvent.addListener(marker, "click", function(){ 
      var position = marker.getPoint(); 
      geocoder.getLocations(position, function(addresses) { 
       if(addresses.Status.code != 200) { 
       marker.openInfoWindowHtml("<b>Google Reverse Geocode:</b><br>Reverse geocoder failed to find an address for " + position.toUrlValue()); 
       } 
       else { 
       address = addresses.Placemark[0]; 
       var html = address.address; 
       marker.openInfoWindowHtml("<b>Google Reverse Geocode:</b><br>"+html); 
       } 
      });     
     });  
    } 


    function my_location() { 
     if (google.loader.ClientLocation) { 
      var cl = google.loader.ClientLocation; 
      var html = 'Google ClientLocation: <br><font size="+1">' + cl.address.city + ', ' + cl.address.region+ '<br> ' + cl.address.country+'</font><br>('+cl.latitude+','+cl.longitude+')'; 
      var point = new GLatLng(cl.latitude, cl.longitude); 
      if(!marker) { 
      map.setZoom(12); 
      marker = new GMarker(point,{title: "Click to get address", draggable: true}); 
      map.addOverlay(marker); 
      added = 1; 
      } 
      map.setCenter(point); 
      marker.setPoint(point); 
      marker.openInfoWindowHtml(html); 
     } 
    } 

    function draw_point() { 
     GEvent.addListener(map, 'click', function(overlay, point) { 
      if (point && !added) { 
       marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true, title: "Click to get address"});    
       map.addOverlay(marker); 
       added = 1; 
       GEvent.addListener(marker, "dragend", function(){ 
        write_point(); 
       }); 
      } 
      else if (point && added) { 
       marker.setPoint(point); 
      } 
      write_point(); 
      get_address(); 
     }); 

    } 



    function showAddress(address) { 
     geocoder.getLatLng(
     address, 
     function(point) { 
      if (!point) { 
      alert(address + " not found"); 
      } else { 
      map.setCenter(point, 11); 
      if(!marker) { 
       marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true, title: "Click to get address"});    
       map.addOverlay(marker); 
       get_address(); 
       added = 1; 
      } 
      marker.setPoint(point); 
      write_point(); 
      } 
     } 
    ); 
    } 

    function showLat49Ads(){ 
     Lat49.initAds(19); 
     var center = map.getCenter(); 
     var lat = center.lat(); 
     var lng = center.lng(); 
     var zoomlevel = Lat49.Tile.convertGMap2Zoom(map.getZoom()); 
     Lat49.updateAdByLatLon("lat49ads", lat, lng, zoomlevel); 
    } 

    function load(){ 

     map = new GMap2(document.getElementById("map"),{draggableCursor: 'crosshair', draggingCursor: 'crosshair'}); 
     map.addControl(new GSmallZoomControl()); 
     map.addControl(new GMenuMapTypeControl(),new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(61,7))); 
     map.addMapType(G_PHYSICAL_MAP); 
     map.addControl(new GOverviewMapControl()); 
     var boxStyleOpts = { opacity: .2, border: "2px solid yellow" };   
     var otherOpts = { 
      buttonHTML: "<img src='zoom-control-inactive1.png' title='Drag Zoom' />", 
      buttonZoomingHTML: "<img src='zoom-control-active1.png' title='Drag Zoom: Cancel' />", 
      buttonStartingStyle: {width: '15px', height: '15px'}, 
      overlayRemoveTime: 0 }; 
     map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(25,7))); 
     map.setCenter(new GLatLng(37.35, -121.93), 12); 

     draw_point(); 
     showLat49Ads(); 
     GEvent.addListener(map, "moveend", showLat49Ads); 
    } 
    //]]> 
    </script>  
    </head> 
    <body onload="load()" onunload="GUnload()"> 
    <table width="100%" height="100%" style="width:100%; height:100%"> 
     <tr style="vertical-align:top"> 
      <td style="width:320px"> 
       <table><tr>    
       </tr></table> 
      </td> 
      <td> 
      </td> 
      <td align="right"> 
       <nobr> 
        <form action="#" onsubmit="showAddress(this.address.value); return false"> 
        <input type="text" size="30" name="address" value="Chicago, IL" /> 
        <input type="submit" value="Go!" /> 
        </form> 
       </nobr>  
      </td> 
     </tr> 
     <tr> 
      <td valign="top"> 
       <div style="width:300px;font-size:8pt"><h1>GeoCoder</h1>Click on the map or search a place to add a marker and drag marker around to get marker position coordinates. Click on marker to get approximate address.</div> 
       <br><span style="font-size:8pt"><b>Coordinates (lat, lng):</b> [for GLatLng]</span><br> 
       <input type="text" size="30" id="coord" onclick="this.select()"/> 
       <br><br><span style="font-size:8pt"><b>Coordinates (lng, lat):</b> [for KML]</span><br> 
       <input type="text" size="30" id="kml" onclick="this.select()"/> 
       <br><br><span style="font-size:8pt"><b>Coordinates (lat="x.xx" lng="x.xx"):</b></span><br> 
       <input type="text" size="30" id="attribute" onclick="this.select()"/> 
       <br><br><span style="font-size:8pt"><b>Coordinates (&lt;lat&gt; &lt;lng&gt;):</b></span><br> 
       <textarea rows="2" cols="24" id="latlng" onclick="this.select()" ></textarea>    
       <br> 
       <br>  
        <script type="text/javascript"><!-- 
        google_ad_client = "pub-2773616400896769"; 
        /* maptools_300x250_01 */ 
        google_ad_slot = "1034665593"; 
        google_ad_width = 300; 
        google_ad_height = 250; 
        //--> 
        </script> 
        <script type="text/javascript" 
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
        </script> 
      </td>  
      <td colspan="2" width="100%" height="100%"> 
       <div style="position:relative;width:100%;height:100%"> 
        <div id="lat49ads" lat49adposition="top-right" 
         style="position:absolute;top:7px; right:4px; width:125px; height:133;z-index:99999;"></div>    
        <div id="map" style="width:100%;height:400px;min-height:400px;border:1px solid #999;"></div> 
       </div> 
      </td> 
     </tr> 
    </table> 
    </body> 
</html> 

Si quelqu'un a une idée concernant le code que j'ai posté plus tôt s'il vous plaît poster un commentaire.

merci

Answer 7

C'était le même problème que mentionné ci-dessus.quand j'ai utilisé la page maître, aucune carte google n'a été dessinée. J'ai trouvé une solution plus tard.

Vous devez appeler la fonction Javascript dans la page .aspx où vous voulez montrer google map (comme initialize();) peut être différent dans votre cas.

Code

dans mon cas:

<script type="text/javascript""> 
    window.onload = function() { 
     DrawGoogleMap(); 
    } 

    function DrawGoogleMap() { 
     if (GBrowserIsCompatible()) { 
      map = new GMap2(document.getElementById("GoogleMap_Div")); 
      geocoder = new GClientGeocoder(); 

      GService.GetGoogleObject(fGetGoogleObject); 
     } 
    } 

</script>