We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >

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

5 replies

Last post Apr 01, 2015 11:15 PM by Krunal Parekh

‹ Previous Thread|Next Thread ›

Shortcuts

- 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

A2H

All-Star

50841 Points

9895 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

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

50841 Points

9895 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.

‹ Previous Thread|Next Thread ›