Google Earth link

[0xC0000005]

I want to put a Google Earth Street View link on my page but I'm not sure about the best way to do it. I have copied the HTML code from Google Earth that allows you to embed the link (with street photo already active) and it works fine.

But I don't want the link to be active at first. I want the user to see a simple text message link like this:

Google Earth Street View

which when clicked will activate the Google Earth embedded link.

I'm thinking that I want to somehow trap the on_click() for the original text message, then set a flag (maybe a Request object variable?) and refresh the page so that now when it checks the flag it will display the Google Earth link. Does this sound like the best way to do it?

If so, can you recommend how I would create that text link that traps the click? After I have trapped it, what do I do? How would I refresh the page so that the embedded link would show?

[PeejAvery]

So why don't you just copy and paste the link into a anchor tag??? Is it really that hard??? :confused:

<a href="PASTE YOUR LINK HERE">Google Earth Street View</a>

[Xeel]

one way to do it:
<script type="text/javascript">
function loadStreet(){
window.open('http://maps.google.com/maps?f=q&hl=en&geocode=&q=mexico+city+sudermann&sll=19.433315,-99.184199&sspn=0.015439,0.017745&ie=UTF8&z=16&iwloc=addr','Google Earth Street View','');
}
</script>

<a href="#" title="Street View" onclick="loadStreet();">Google Earth Street View</a>


This way the url won't appear in the status bar, only in the source code of the page...

The other way would be writing a jsp or a servlet that sends you to the desired url.

Anyways you won't be able to really hide the link, when the page with the street view loads the link would be in the address bar. Also the google maps has a link above the map view with the url of the selected view, so even if you get direct access to google's servlets and post your requests there, after the view opens anyone could just use this little link...

[0xC0000005]

So why don't you just copy and paste the link into a anchor tag??? Is it really that hard??? :confused:

<a href="PASTE YOUR LINK HERE">Google Earth Street View</a>
Sorry, I must not have explained too well. I don't want a standard link as you have shown. The link that I have from Google Earth is an interactive embedded graphic. Maybe you've seen something similar with YouTube videos.

People will embed YouTube videos right on their pages and all you have to do is click play and the video will play right in that page. I want to do the same thing with a Google Earth Street View but it seems to require a bigger initial download from google.com than video screen caps do from YouTube - and believe it or not - I'm still dealing with quite a few dial-up clients who can't afford to wait for the content to load.

What I want is a simple text hyplerlink. But when I click it, I want my page to refresh with the embedded Google Earth HTML to be rendered instead of the simple text link.

Sorry again about the confusion, but I am relatively new to web programming - especially client side scripting.

[0xC0000005]

one way to do it:
<script type="text/javascript">
function loadStreet(){
window.open('http://maps.google.com/maps?f=q&hl=en&geocode=&q=mexico+city+sudermann&sll=19.433315,-99.184199&sspn=0.015439,0.017745&ie=UTF8&z=16&iwloc=addr','Google Earth Street View','');
}
</script>

<a href="#" title="Street View" onclick="loadStreet();">Google Earth Street View</a>
Thanks Xeel,

That looks like it will open a new window which is still not quite what I want. See my reply to PeejAvery for more info but I'll expand a bit here too.

It's like I need two versions of my page - one with a simple text link and one with the link replaced by the embedded Google HTML code in its place. When I click the text link it should not open a new window but simply stay at the same place on the current page but the text link should disappear and the embedded HTML code should appear in its place. Does that make more sense?

[Xeel]

Option #1: use iframe and call your map url there with embed parameter.
http://maps.google.com/support/bin/answer.py?hl=en&answer=68478
You can easily place a Google Map or Street View on your website or blog. This does not require an API key. To do this, click Link to this page, copy the web address from the Paste HTML to embed in website field in your browser and paste it into the HTML code of your website. To resize and preview the map, click Customize and preview embedded map.
Option #2: http://www.mapchannels.com/Tutorials.aspx.

Option #3: There is google maps API out there to create your own marks, locations, etc. and embed it into html. To use it you need to register with google (http://code.google.com/apis/maps/);

[0xC0000005]

Option #1: use iframe and call your map url there.
Option #2: http://www.mapchannels.com/Tutorials.aspx.
Option #3: There is google maps API out there to create your own marks, locations, etc. and embed it into html. To use it you need to register with google.

Option# 1:
The Google HTML code is already iframe and I have no problem embedding it in my page. But I don't want it to show up on my page until the user clicks a simple text link that says "show me the google street view embedded right here on this page in place of the text link I am now going to click."

Option #2:
Unless I'm missing something, those tutorials only tell me how to get to the point I'm already at. I'm more interested in the dynamic javascipt code to change my text link into and embedded iframe.

Option #3:
I don't want to use marks, locations, etc. The embedded iframe is all I need. But I still need to know how to make it show up on the page only after the user has clicked the text link.

[Xeel]

The Google HTML code is already iframe and I have no problem embedding it in my page. But I don't want it to show up on my page until the user clicks a simple text link that says "show me the google street view embedded right here on this page in place of the text link I am now going to click."

that's easy
<script type="text/javascript">
function loadStreet(){
var myMap = document.getElementById("myStreet");
if(myMap.style.display == "none"){
myMap.style.display = "block";
}else{
myMap.style.display = "none";
}
}
</script>

<a href="#" title="Street View" onclick="loadStreet();">Google Earth Street View</a>

<div id="myStreet" style="display:none;">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=19.435707,-99.183969&amp;spn=0.00772,0.008873&amp;z=17&amp;output=embed&amp;s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw"></iframe><br /><small><a href="http://maps.google.com/?ie=UTF8&amp;ll=19.435707,-99.183969&amp;spn=0.00772,0.008873&amp;z=17&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>

[0xC0000005]

that's easy...

Excellent! That's exactly what I was looking for. Sorry it took so long to explain.

Now I need to convert it to some type of template so that it can be used without dependencies on named tags (if I'm using the right terminology) and various other things, but that's my problem. I may have more questions later.

[0xC0000005]

Is there some way I can pass a parameter to the loadStreet() function?

This code doesn't work (and I understand why) but maybe it will give you an idea of what I want to do.


<script type="text/javascript">
function loadStreet(street_view)
{
var myMap = document.getElementById(street_view);
...
}
</script>


<%

// Server-side JavaScript
street_view = "Street View";

%>

<a href="#" title="<%=street_view%>" onclick="loadStreet("<%=street_view%>");">Google Earth Street View</a>

<%
// More server-side JavaScript

[Xeel]

<script type="text/javascript">
function loadStreet(adr){
var myMap = document.getElementById("myStreet"+adr);
if(myMap.style.display == "none"){
myMap.style.display = "block";
}else{
myMap.style.display = "none";
}
}
</script>

<a href="#" title="Street View" onclick="loadStreet('0');">Google Earth Street View #0</a>
<br />
<a href="#" title="Street View" onclick="loadStreet('1');">Google Earth Street View #1</a>

<div id="myStreet0" style="display:none;">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=19.435707,-99.183969&amp;spn=0.00772,0.008873&amp;z=17&amp;output=embed&amp;s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw"></iframe><br /><small><a href="http://maps.google.com/?ie=UTF8&amp;ll=19.435707,-99.183969&amp;spn=0.00772,0.008873&amp;z=17&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
<div id="myStreet1" style="display:none;">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=19.435707,-99.183969&amp;spn=0.00772,0.008873&amp;z=17&amp;output=embed&amp;s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw"></iframe><br /><small><a href="http://maps.google.com/?ie=UTF8&amp;ll=19.435707,-99.183969&amp;spn=0.00772,0.008873&amp;z=17&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>

And if you need to show only one map at a time just alter the iframe src parameter:
<script type="text/javascript">
function loadStreet(adr,largerAdr){
document.getElementById("mapWindow").src = "dummy.html";
document.getElementById("mapWindow").src = adr;
document.getElementById("mapLink").href = largerAdr;
}
</script>

<a href="#" title="Street View #0" onclick="loadStreet('http://maps.google.com/?ie=UTF8&amp;ll=19.435707,-99.183969&amp;spn=0.00772,0.008873&amp;z=17&amp;output=embed&amp;s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw','http://maps.google.com/?ie=UTF8&amp;ll=19.435707,-99.183969&amp;spn=0.00772,0.008873&amp;z=17&amp;source=embed');">Google Earth Street View #0</a>
<br />
<a href="#" title="Street View #1" onclick="loadStreet('http://maps.google.com/?ie=UTF8&amp;ll=19.435707,-99.183969&amp;spn=0.00772,0.008873&amp;z=17&amp;output=embed&amp;s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw','http://maps.google.com/?ie=UTF8&amp;ll=19.435707,-99.183969&amp;spn=0.00772,0.008873&amp;z=17&amp;source=embed');">Google Earth Street View #1</a>

<div id="mapDiv" style="border:solid 1px #0000FF; width:425px; height:350px;">
<iframe id="mapWindow" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="dummy.html"></iframe>
<br />
<small><a id="mapLink" href="" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
dummy.html is needed because of some browsers using chached source for the iframe so when you click it for the second time it wont update the iframe's content. With dummy.html reference all browsers will always update the iframe's content.

[0xC0000005]

Thanks for the advice,

Everything is working great now except for one minor detail. When I click on the text link the embedded map shows/hides as required, but the page moves back to the top - it doesn't stay at the location of the link/map. I have to scroll down to see it.

I mentioned that due to the complexity of my display requirements I have to build links dynamically with server-side javascript / ASP. Below is the HTML result of one of those links and it does work fine except the page movesback to the top.

I am having a difficult time understanding why. Maybe you could take a look and see if you notice what I overlooked in transferring from your example.



<a href="#" title="Google Earth Street View- Merwin Ave." onclick="loadEmbeddedMap('Google Earth Street View- Merwin Ave.');">Google Earth Street View- Merwin Ave.</a>
<div id="Google Earth Street View- Merwin Ave." style="display:none;"><iframe width="425" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/sv?cbp=1,24.72029933320156,,1,-0.18796440227444916&amp;cbll=41.493004,-81.702979&amp;panoid=iASWb7oNTBlhcHhg74gpAg&amp;v=1&amp;hl=en&amp;gl=us"> </iframe><br /> <small> <a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=merwin+ave,+cleveland+ohio&amp;sll=37.0625,-95.677068&amp;sspn=49.71116,59.414063&amp;ie=UTF8&amp;ll=41.504271,-81.706181&amp;spn=0.011572,0.014505&amp;z=14&amp;layer=c&amp;cbll=41.493004,-81.702979&amp;panoid=iASWb7oNTBlhcHhg74gpAg&amp;cbp=1,24.72029933320156,,1,-0.18796440227444916&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small><br></div><br>



This is myloadEmbeddedMap() function that takes a string as argument.

<script type="text/javascript">
<!--
function loadEmbeddedMap(id)
{
var myMap = document.getElementById(id);

if(myMap.style.display == "none")
myMap.style.display = "block";
else
myMap.style.display = "none";
}
-->
</script>

[Xeel]

it's happening because of href="#" in the <a> tags. Just replace "#" with "#idOfMyIframe" assigning an id to each iframe/div before that. The page will scroll itself trying to place the called element to the top then.

[0xC0000005]

it's happening because of href="#" in the <a> tags. Just replace "#" with "#idOfMyIframe" assigning an id to each iframe/div before that. The page will scroll itself trying to place the called element to the top then.Thanks, since the problem really has nothing to do with the original Google Earth Link question I asked it again in this thread (http://www.codeguru.com/forum/showthread.php?t=461511) where another suitable answer was provided. I wasn'table to rate your post again so soon but I appreciate the help.

[PeejAvery]

I wasn'table to rate your post again so soon but I appreciate the help.
:thumb: Lot's of good work in this thread Xeel! Since he couldn't rate again, I definitely did!