Can't display Goole Map on Child Page In Master PageRSS

• • Reply
  Mei_Yi

  Member

  1 Points

  11 Posts

  Can't display Goole Map on Child Page In Master Page

  Mar 23, 2015 11:14 AM|Mei_Yi|LINK

  HI. I followed the instructions in:

  https://developers.google.com/maps/documentation/javascript/examples/streetview-simple?csw=1

  The code worked in normal web pages. But when I placed it into the master page the map would not appear. I tried changing the div to:

  <div id="map_canvas" style="width:800px; height:600px"></div>
  <div id="pano" style="width:300px; height:100px"></div>

  It doesn't work too. Please help.
  
  

  googlemap vb asp.net masterpage childpage

• • Reply
  A2H

  All-Star

  50601 Points

  9823 Posts

  Re: Can't display Goole Map on Child Page In Master Page

  Mar 23, 2015 11:31 AM|A2H|LINK

  Mei_Yi

  The code worked in normal web pages. But when I placed it into the master page the map would not appear.

  Most likely the issue will be due to the fact that your code wont be able to access the div due to the id appended to div id at runtime by master page.Try using Control.ClientId property to access the controls, this will ensure that you are using the control ID for HTML markup that is generated by ASP.NET.

  Sample Code

    <script>
          function initialize() {
              var fenway = new google.maps.LatLng(42.345573, -71.098326);
              var mapOptions = {
                  center: fenway,
                  zoom: 14
              };
              var map = new google.maps.Map(
              //Use ClientID here
        document.getElementById('<%=map-canvas.ClientID%>'), mapOptions);
              var panoramaOptions = {
                  position: fenway,
                  pov: {
                      heading: 34,
                      pitch: 10
                  }
              };
              var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
              map.setStreetView(panorama);
          }
  
          google.maps.event.addDomListener(window, 'load', initialize);
      </script>

  Thanks,
  Aje
  My Blog | Dotnet Funda
• • Reply
  Mei_Yi

  Member

  1 Points

  11 Posts

  Re: Can't display Goole Map on Child Page In Master Page

  Mar 24, 2015 12:25 AM|Mei_Yi|LINK

  a2h

  Mei_Yi

  The code worked in normal web pages. But when I placed it into the master page the map would not appear.

  Most likely the issue will be due to the fact that your code wont be able to access the div due to the id appended to div id at runtime by master page.Try using Control.ClientId property to access the controls, this will ensure that you are using the control ID for HTML markup that is generated by ASP.NET.

  Sample Code

    <script>
          function initialize() {
              var fenway = new google.maps.LatLng(42.345573, -71.098326);
              var mapOptions = {
                  center: fenway,
                  zoom: 14
              };
              var map = new google.maps.Map(
              //Use ClientID here
        document.getElementById('<%=map-canvas.ClientID%>'), mapOptions);
              var panoramaOptions = {
                  position: fenway,
                  pov: {
                      heading: 34,
                      pitch: 10
                  }
              };
              var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
              map.setStreetView(panorama);
          }
  
          google.maps.event.addDomListener(window, 'load', initialize);
      </script>

  I tried changing to this:

  <asp:Image ID="map_canvas" width = "300px" height = "100px" runat="server" />
  
  <asp:Image ID="pano" width = "300px" height = "100px" runat="server" />
  

   <script>
          function initialize() {
              var fenway = new google.maps.LatLng(3.148212, 101.751548);
              var mapOptions = {
                  center: fenway,
                  zoom: 14
              };
              var map = new google.maps.Map(
              document.getElementById('<%=map_canvas.ClientID%>'), mapOptions);
              var panoramaOptions = {
                  position: fenway,
                  pov: {
                      heading: 34,
                      pitch: 10
                  }
              };
              var panorama = new google.maps.StreetViewPanorama(document.getElementById('<%=pano.ClientID%>'), panoramaOptions);
              map.setStreetView(panorama);
          }
  
          google.maps.event.addDomListener(window, 'load', initialize);
  
      </script>
  

  Two grey shades of image appears:
  

  

  I think the page did loaded the Google Map but it can't be loaded into my Image Box.

• • Reply
  A2H

  All-Star

  50601 Points

  9823 Posts

  Re: Can't display Goole Map on Child Page In Master Page

  Mar 24, 2015 12:44 AM|A2H|LINK

  Mei_Yi

  <asp:Image ID="map_canvas" width = "300px" height = "100px" runat="server" /> <asp:Image ID="pano" width = "300px" height = "100px" runat="server" />

  You might consider changing the Image to div as provided in the article. I was able to get the details in div however I couldnt get the map displayed in Image tag

  Thanks,
  Aje
  My Blog | Dotnet Funda
• • Reply
  Mei_Yi

  Member

  1 Points

  11 Posts

  Re: Can't display Goole Map on Child Page In Master Page

  Mar 25, 2015 09:02 AM|Mei_Yi|LINK

  A2H

  You might consider changing the Image to div as provided in the article. I was able to get the details in div however I couldnt get the map displayed in Image tag

  I tried changing:

  <div id="map_canvas" width = "300px" height = "100px" ></div>
  <div id="pano" width = "300px" height = "100px"></div>
  

  It can't find the div using :

  document.getElementById('<%=map_canvas.ClientID%>'), mapOptions);
  

  The map_canvas appear to be underlined with a blue jagged line.
  
  

• • Reply
  Krunal Parek...

  All-Star

  15252 Points

  2074 Posts

  Re: Can't display Goole Map on Child Page In Master Page

  Apr 01, 2015 11:15 PM|Krunal Parekh|LINK

  Hello Mei_Yi,

  You could try posting your Question on Google maps forum. You are likely to get more response from there.

  https://productforums.google.com/forum/#!forum/maps

  Hope this helps.

  With Regards,

  Krunal Parekh

  Krunal
  
  MSDN Community Support
  Please remember to "Mark as Answer" the responses that resolved your issue.