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

Question

User1495503053 posted

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.

Answer 1

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>

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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