locked
Can't display Goole Map on Child Page In Master Page RRS feed

All replies

  • User2103319870 posted

    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 = {
                    ,
                    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>

    Monday, March 23, 2015 11:31 AM
  • User1495503053 posted

    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 = {
                    ,
                    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 = {
                    ,
                    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.

    Tuesday, March 24, 2015 12:25 AM
  • User2103319870 posted

    <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

    Tuesday, March 24, 2015 12:44 AM
  • User1495503053 posted

    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.

    Wednesday, March 25, 2015 9:02 AM
  • User1644755831 posted

    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

    Wednesday, April 1, 2015 11:15 PM