Google Maps & Master Pages

  • Thread starter Thread starter MeerkatInFrance
  • Start date Start date
M

MeerkatInFrance

There comes a time when you know you are not going to be able to work
something out yourself, however hard you try. I have reached that moment.

I have a master page and a slave page (or whatever one calls it)

All I want to do is show a Google map on the slave page.
The map that Google gives as an example when it gives you a key would be
just fine.

I have searched high and low for a means of doing this but all I could find
was half answers or the occasional clever remark from someone clever, which
didn't help me much.

What I would really love would be the three or four lines that I feel sure
would be all that is all that is needed.

Failing that, any help ( however obscure or cryptic ) would be very
gratefully received.

Many thanks,

MeerkatInFrance
 
Hi Clinton,

Thanks for the reply.
Believe me when I say I have searched everywhere for any answer using every
keyword imaginable.
It seems the only people who have managed to do this simple thing are
experts whose suggestions are way above my head.
All I am looking for is a simple expalnation answer to a simple question.
I don't care what map is displayed, any one in the whole world will do.
I am certain many people would be grateful for an answer, not least, those
who have tried get an answer but failed.

Once again, thanks for talking the trouble to reply. Hopefully some other
kind person will come up with some ideas.

Regards, Pete.
 
hello,

actually u dont make much sense talking about master\content page and
google maps api, however i will be glad to help if u can rephrase your
problem if that possible please. my first google search was this link i
am sure if you searched u have been there but i am including it in my
post anyway, hope tht help and feel free to join me in your development!

http://www.codeguru.com/Csharp/.NET/net_asp/controls/article.php/c10539/

Sharing makes All the Difference
 
Pete, in so many words you've said twice now that you don't really care what
type of map you get so I'm wondering why you don't try to get one from
another provider? Its very easy to go to a site like MapQuest or perhaps
even Expedia both of which allow making a query to generate a map and then
copying and pasting code they provide that links to the map from a web page.
Even Yahoo supports this too I think.

If that is acceptable try that out, otherwise if its absolutley neccessary
to learn to use code at this time the .NET control that Dave just referred
us to [1] is a very interesting option I intend to study myself. Thank you
for bringing that to our attention Dave. I could handle the coding but at
the moment I would like something simple until I have the time to go study a
new API to take advantage of broader opportunities. Dragging a control into
a page and setting some properties is my idea of getting something done
lickity split. ;-)

<%= Clinton Gallagher
NET csgallagher AT metromilwaukee.com
URL http://www.metromilwaukee.com/clintongallagher/

[1] http://www.codeguru.com/Csharp/.NET/net_asp/controls/article.php/c10539/
 
Hello Dave,
I am very excited by your offer to help because I really do want to get this
solved.
You say I didn't make much sense when describing the problem, so I am going
to try much harder to make things more clear.
I thought I explained things before but no one seems to know what I am on
about so here is my second attempt.



By the way, the Bill Pierce article that you reference is excellent and I
learnt a great deal from it.



If you look at the first comment, you will see that someone had a problem
getting the control to work with Master Pages.
http://www.codeproject.com/aspnet/LatLaysFlat-Part4.asp



However, I think my problem is far simpler than that.



In order to display a Google map, one has to apply for a key and

Google sends back a page similar to the following:


Thank you for signing up for a Google Maps API key!
-----------------------------------------------------------------



Your key is:
--------------
ABQIAAAAs5UE471qW8DM4jCbPbQK7xTqmISFW6ihj9DyVBKjLCKBPkEuVhQavH-o3oN4agIcY3H_Xwx41dojtQ



Here is an example web page to get you started ...
-----------------------------------------------------------------



<!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>Google Maps JavaScript API Example</title>
<script
src="http://maps.google.com/maps?file=ap...9DyVBKjLCKBPkEuVhQavH-o3oN4agIcY3H_Xwx41dojtQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>



-----------------------------------------------------------------



This sample page works perfectly as a standard aspx page. So far so good!



My problem is that I want to display this page in a Content Page but I
cannot do it.

(Master Pages use Content Pages. Please let me know if this needs further
explanation)
I am looking for someone to let me know exactly what needs to be done.
As I mentioned before, I believe there must be many people out there who
want to do the same thing and who would also be grateful for any help.



I am really hoping that this attempt is sufficient to explain what I am
trying to do, but if it is not, then I will happily try again.

Waiting with fingers well and truly crossed for some help.



Pete.
 
Hello Clinton,
I apologise for not responding earlier.
You say you are going to study the Bill Pierce article.
If you ever decide to display a Google Map in a Master Page, I wonder if you
could let me know how you get on as I am still unable to do this.
I shall check this newsgroup every day in the hope of a response.

Many thanks,

Pete.




clintonG said:
Pete, in so many words you've said twice now that you don't really care
what type of map you get so I'm wondering why you don't try to get one
from another provider? Its very easy to go to a site like MapQuest or
perhaps even Expedia both of which allow making a query to generate a map
and then copying and pasting code they provide that links to the map from
a web page. Even Yahoo supports this too I think.

If that is acceptable try that out, otherwise if its absolutley neccessary
to learn to use code at this time the .NET control that Dave just referred
us to [1] is a very interesting option I intend to study myself. Thank you
for bringing that to our attention Dave. I could handle the coding but at
the moment I would like something simple until I have the time to go study
a new API to take advantage of broader opportunities. Dragging a control
into a page and setting some properties is my idea of getting something
done lickity split. ;-)

<%= Clinton Gallagher
NET csgallagher AT metromilwaukee.com
URL http://www.metromilwaukee.com/clintongallagher/

[1]
http://www.codeguru.com/Csharp/.NET/net_asp/controls/article.php/c10539/
Click to expand...
 
hello pete,
i am sorry as i was really busy lately, however i tried compelte the
task myself and i got stucked early as i couldnt use the key on the
local host(no domain)! however i think the solution for you is simple
and clear as you said
This sample page works perfectly as a standard aspx page. So far so good!



My problem is that I want to display this page in a Content Page but I
cannot do it.
Click to expand...

i think u should try developing it in a WebUserControl(.ascx) instead of
a standard aspx page. then just simply darp and drop the WebUserControl
into your master page.

i am sure its gonna work,

Sharing makes All the Difference
 
Hi Dave,
Yes it is almost certainly simple but no one has yet been kind enough to
lend a hand :-(
In reference to your key problem,
when you apply for key, try
My web site URL: http://localhost
I worked for me !
Hope that was of some use.

Regards,

Pete.
 
It may not be pertinent but the following solution does use Google Earth so
here's a fast way to get something going [1] and here [2] is some code you
can copy into a page to see what results look and feel like using my own
location. Note once you get the HTML from Wikimapia the width and height
dimensions can be modified at will so you can put the iframe into a page and
tweak until it is sized right for the page you are using it with. Its also
an easy way to get coordinates for your site as you can see I've added mine
to my sig :-)

Now if somebody develops an app that a set of coordinates can be copied into
so a map will be generated having coordinates will become much more useful
for public exposure. Once we create the map we can always copy the URL and
send that around...

<%= Clinton Gallagher
NET csgallagher AT metromilwaukee.com
URL http://clintongallagher.metromilwaukee.com/
MAP 43°2'17"N 88°2'37"W : 43°2'17"N 88°2'37"W

[1]
http://wikimapiablog.blogspot.com/2006/08/how-to-add-google-map-to-any-web-page.html
[2] <iframe src=http://wikimapia.org/s/#y=43038517&x=-88044455&z=17&l=0&m=h
width=720 height=300 frameborder=0></iframe>
[3] http://wikimapia.org/#y=43038073&x=-88043838&z=17&l=0&m=h


MeerkatInFrance said:
Hi Dave,
Yes it is almost certainly simple but no one has yet been kind enough to
lend a hand :-(
In reference to your key problem,
when you apply for key, try
My web site URL: http://localhost
I worked for me !
Hope that was of some use.

Regards,

Pete.
Click to expand...
 
MeerkatInFrance said:
My problem is that I want to display this page in a Content Page but I
cannot do it.
Click to expand...

I don't know for certain if this is relevant, but I wouldn't be at all
surprised if the problem is that the Javascript called references
controls/elements on the page whose IDs are changed when you use master
pages. This is a common complaint about master pages, which is not too
hard to avoid when you are writing your own Javascript, but a serious
pain when using someone else's.

If you don't know what I'm talking about, create a master and content
page, then add a control to the content. Look at the generated (X)HTML
from the View->Source option in your browser, and see what ID the
control gets when it is rendered. With a simple (ie no master page)
..aspx page, the ID will probably be the same as the one you gave the
server side control. With master pages, the framework gives it a more
complex name, built up from the IDs of any parents, including the master
itself. This is done to avoid ID name conflicts, but means that your
client side IDs are a pain to predict and can easily change.

I hope this helps you understand the problem, although if I'm right,
then there's not much you can do about it unless you are prepared to
rewrite Google's Javascript code (which I wouldn't recommend!!).

HTH
 
I had just the same problem, so after fiddling with it a little bit, I
managed to get it to work.

The content body (within the aspx page) would look like this...

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=some
long key here"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>



<div id="map" style="width: 500px; height: 300px"></div>



The interesting part is that I needed to create two master pages, a
standard one, and a copy with the <Body onload events> required by
google...

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


not that elegant but it will work. I'm trying to find out a
programatically way to add the onload/unload events into the master page
body tag so that I can use one master page. Until then, this will
work...

Hope this helps...
 
Freddy Guime said:
var map = new GMap2(document.getElementById("map"));
Click to expand...

You could just try changing this one line to...

var map = new GMap2(document.getElementById("<%= map.ClientID %>"));

Although this would require you to add runat="server" to the <div>
element. See my previous post as to why.

HTH
 
Freddy said:
not that elegant but it will work. I'm trying to find out a
programatically way to add the onload/unload events into the master page
body tag so that I can use one master page. Until then, this will
work...
Click to expand...

Here's what I did.

On the MASTER page, give the body tag an ID and runat server.
<body id="BodyID" runat="server">

On the CONTENT page

First declare your variable

Protected MasterPageBodyTag As
System.Web.UI.HtmlControls.HtmlGenericControl

Then on the Page_OnLoad event
add the following lines of code

MasterPageBodyTag = Me.Master.FindControl("BodyID")
MasterPageBodyTag.Attributes.Add("OnUnload", "GUnload()")
MasterPageBodyTag.Attributes.Add("OnLoad", "Load();")

Hope that helps.
 
The problem MeerkatInFrance is trying to explain is that he wants to use
an aspx page that uses a master page as a template.

The problem is that the body tag is in the master page and he is trying
to display a map in the .aspx page.

Google specifies to put this code in the body tag which is this case is
in the masterpage:

onload="load()" onunload="GUnload()"

While he is trying to display the map in the .aspx page with
code like this:

<div id="map" style="width: 800px; height: 500px"></div>

The script that is being called is embedded in the <head> tag which is
also in the masterpage. it would be something similar to this

<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));

map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(40.658943, -73.645853), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("XYZ Company"));
// Our info window content
var infoTabs = [
new GInfoWindowTab("Tab #1", "Tab text 1"),
new GInfoWindowTab("Tab #2", "Tab text 2"),
new GInfoWindowTab("Tab #3", "Tab text 3")
];

// Place a marker in the center of the map and open the info
window
// automatically
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
}
}
//]]>
</script>

So this presents several problems.

1) it doesn't work
2) you are calling the load function in the masterpage and every page on
the site that is using the masterpage, the call to google to load the
map happens. And it's quite likely that most pages would not have a map
on it.
3) I am able to make a seperate html page with the script, onload call,
and the map all in the same page. This works fine, but it is not what I
had in mind. I want to use my masterpage to keep the look of the site in
tact, and yet have a page that uses the masterpage template be able to
display a google map.
Also, I don't want the map in the masterpage because all pages in the
site would have the map, clearly this is not what you want here.

I noticed an article that shows you how to do it with the 1.1 framework.
It also shows how to put it into a user control. I am using the 2.0
framework, but I am going to try and do it. If it works, I will let you
know.
 
The problem MeerkatInFrance is trying to explain is that he wants to use
an aspx page that uses a master page as a template.

The problem is that the body tag is in the master page and he is trying
to display a map in the .aspx page.

Google specifies to put this code in the body tag which is this case is
in the masterpage:

onload="load()" onunload="GUnload()"

While he is trying to display the map in the .aspx page with
code like this:

<div id="map" style="width: 800px; height: 500px"></div>

The script that is being called is embedded in the <head> tag which is
also in the masterpage. it would be something similar to this

<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));

map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(40.658943, -73.645853), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("XYZ Company"));
// Our info window content
var infoTabs = [
new GInfoWindowTab("Tab #1", "Tab text 1"),
new GInfoWindowTab("Tab #2", "Tab text 2"),
new GInfoWindowTab("Tab #3", "Tab text 3")
];

// Place a marker in the center of the map and open the info
window
// automatically
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
}
}
//]]>
</script>

So this presents several problems.

1) it doesn't work
2) you are calling the load function in the masterpage and every page on
the site that is using the masterpage, the call to google to load the
map happens. And it's quite likely that most pages would not have a map
on it.
3) I am able to make a seperate html page with the script, onload call,
and the map all in the same page. This works fine, but it is not what I
had in mind. I want to use my masterpage to keep the look of the site in
tact, and yet have a page that uses the masterpage template be able to
display a google map.
Also, I don't want the map in the masterpage because all pages in the
site would have the map, clearly this is not what you want here.

I noticed an article that shows you how to do it with the 1.1 framework.
It also shows how to put it into a user control. I am using the 2.0
framework, but I am going to try and do it. If it works, I will let you
know.
 
2) you are calling the load function in the masterpage and every page on
the site that is using the masterpage, the call to google to load the
map happens. And it's quite likely that most pages would not have a map
on it.
Click to expand...

Give the MasterPage's <body> tag an id and run it server-side

<body id="objBody" runat="server">

Then, in the Page_Load() of the ContentPages where this is required:

Master.FindControl("objBody").Attributes.Add("onload", "load();");
Master.FindControl("objBody").Attributes.Add("onunload", "GUnload();");

I'm pretty sure you could place the JavaScript in a source file which you
include in only those ContentPages which need it...
 
Back
Top