Solved

Google maps website trying to get the map to switch loctions

Posted on 2011-03-12
5
366 Views
Last Modified: 2012-06-27
i have added google maps to my website.

But i am trying to get the map to change its location when the user click one of the locations on teh page

I posted the following code for one loction (Oswego)
           <iframe height="300"
            marginHeight=0
            src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=68,Main+Street,Oswego,IL,60543&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&t=h&ll=41.684066,-88.352222&spn=0.01923,0.025749&z=14&iwloc=A&output=embed"
            frameBorder=0 width=300 marginWidth=0
            scrolling=no></iframe><br><small><a
            style="TEXT-ALIGN: left; COLOR: #0000ff"
            href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=68,Main+Street,Oswego,IL,60543&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&t=h&ll=41.684066,-88.352222&spn=0.01923,0.025749&z=14&iwloc=A">View
            Larger Map</a></small>

I have two locations one oswego on aurora
I wnat ot change the href values but i do not know how to declare a variable and assign it a value in HTML

819 Oak Ave
Aurora,  Illinois  60506

68, Main Street
suite 2
Oswego,  Illinois  60543

I cant seem to get the answer from google maps
0
Comment
Question by:jhacharya
  • 3
  • 2
5 Comments
 
LVL 10

Expert Comment

by:gavsmith
ID: 35121886
Give your IFrame and link an ID so they can be referenced in javascript then change the src and href values in the onclick events of the 2 location buttons (you didn't post the code for your location so I'll assume they are just hyperlinks).

           <iframe id="googleMap" height="300"
            marginHeight=0
            src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=68,Main+Street,Oswego,IL,60543&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&t=h&ll=41.684066,-88.352222&spn=0.01923,0.025749&z=14&iwloc=A&output=embed"
            frameBorder=0 width=300 marginWidth=0
            scrolling=no></iframe><br><small><a id="largeMapLink"
            style="TEXT-ALIGN: left; COLOR: #0000ff"
            href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=68,Main+Street,Oswego,IL,60543&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&t=h&ll=41.684066,-88.352222&spn=0.01923,0.025749&z=14&iwloc=A">View
            Larger Map</a></small>

<a href="#" onclick="googleMap.src='http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=68,Main+Street,Oswego,IL,60543&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&t=h&ll=41.684066,-88.352222&spn=0.01923,0.025749&z=14&iwloc=A&output=embed'; largeMapLink.href='http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=68,Main+Street,Oswego,IL,60543&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&t=h&ll=41.684066,-88.352222&spn=0.01923,0.025749&z=14&iwloc=A';">
  Oswego
</a>

<a href="#" onclick="googleMap.src=' place Aurora google link here ';largeMapLink.href=' place Aurora large map link here ';">
  Aurora
</a>

HTH
Gav
0
 
LVL 2

Author Comment

by:jhacharya
ID: 35122460
some how this is not switching, I am not sure what I have done wrong here.
Also if you know how to put the Oswego and Aurora in 2 paragraphs that but up next to each other that would be great so I can remoave all the space chars
here is the code I am using to switch between the two
            <p><a
            onclick="googleMap.src='http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=68,Main+Street,Oswego,IL,60543&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&t=h&ll=41.684066,-88.352222&spn=0.01923,0.025749&z=14&iwloc=A&output=embed'; largeMapLink.href='http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=68,Main+Street,Oswego,IL,60543&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&t=h&ll=41.684066,-88.352222&spn=0.01923,0.025749&z=14&iwloc=A';"
            href="#">Oswego</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a
            onclick="googleMap.src='http://www.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=819,+oak+ave,aurora,il,60506&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=819+Oak+Ave,+Aurora,+Kane,+Illinois+60506&t=h&ll=41.773424,-88.316689&spn=0.019203,0.025749&z=14&iwloc=A&output=embed'; largeMapLink.href='http://www.google.com/maps?f=q&source=embed&hl=en&geocode=&q=819,+oak+ave,aurora,il,60506&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=819+Oak+Ave,+Aurora,+Kane,+Illinois+60506&t=h&ll=41.773424,-88.316689&spn=0.019203,0.025749&z=14&iwloc=A';"
            href="#">Aurora</a> <br>68, Main Street, Suite 2
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 819, Oak Ave, <br>Oswego
            , IL , 60543
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Aurora, IL , 60506</p>
            <p>Phone: 630-479-0132<br>E-mail: <a
            href="mailto:support@BeCounseling.com"
            target="">support@BeCounseling.com</a></p><iframe id="googleMap"
            height=300 marginHeight=0
            src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=68,Main+Street,Oswego,IL,60543&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&t=h&ll=41.684066,-88.352222&spn=0.01923,0.025749&z=14&iwloc=A&output=embed"
            frameBorder=0 width=300 marginWidth=0
            scrolling=no></iframe><br><small><a
            style="TEXT-ALIGN: left; COLOR: #0000ff" id=largeMapLink
            href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=68,Main+Street,Oswego,IL,60543&aq=&sll=37.0625,-95.677068&sspn=29.910058,56.162109&ie=UTF8&hq=&hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&t=h&ll=41.684066,-88.352222&spn=0.01923,0.025749&z=14&iwloc=A">View
            Larger Map</a></small>
0
 
LVL 2

Author Comment

by:jhacharya
ID: 35123748
the error i get is Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.6; BTRS26718; FunWebProducts; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E; InfoPath.3)
Timestamp: Sun, 13 Mar 2011 21:55:49 UTC


Message: Object expected
Line: 304
Char: 5
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


Message: 'googleMap' is undefined
Line: 268
Char: 1
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


Message: 'googleMap' is undefined
Line: 272
Char: 1
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


Message: 'googleMap' is undefined
Line: 268
Char: 1
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


Message: 'googleMap' is undefined
Line: 272
Char: 1
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


Message: 'googleMap' is undefined
Line: 268
Char: 1
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


Message: 'googleMap' is undefined
Line: 272
Char: 1
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


Message: 'googleMap' is undefined
Line: 268
Char: 1
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


Message: 'googleMap' is undefined
Line: 272
Char: 1
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


Message: 'googleMap' is undefined
Line: 268
Char: 1
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


Message: 'googleMap' is undefined
Line: 272
Char: 1
Code: 0
URI: file:///C:/Documents%20and%20Settings/POINT-HD/Desktop/Web%20Be%20Counseling/Web%20Pages/public_html/6401/contact.html


not sure how to get past this? maybe its a typo ion myside but i cant see what it is ..
0
 
LVL 10

Accepted Solution

by:
gavsmith earned 500 total points
ID: 35124435
my bad missed document.getElementById... try this:

    <div style="display:inline-block;width:204px">
        <a onclick="document.getElementById('googleMap').src='http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=68,Main+Street,Oswego,IL,60543&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=29.910058,56.162109&amp;ie=UTF8&amp;hq=&amp;hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&amp;t=h&amp;ll=41.684066,-88.352222&amp;spn=0.01923,0.025749&amp;z=14&amp;iwloc=A&amp;output=embed'; document.getElementById('largeMapLink').href='http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=68,Main+Street,Oswego,IL,60543&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=29.910058,56.162109&amp;ie=UTF8&amp;hq=&amp;hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&amp;t=h&amp;ll=41.684066,-88.352222&amp;spn=0.01923,0.025749&amp;z=14&amp;iwloc=A';"
            href="#">Oswego</a>
            <br/>68, Main Street, Suite 2
            <br/>Oswego, IL , 60543
   </div>
   <div style="display:inline-block;width:204px">
        <a onclick="document.getElementById('googleMap').src='http://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=819,+oak+ave,aurora,il,60506&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=29.910058,56.162109&amp;ie=UTF8&amp;hq=&amp;hnear=819+Oak+Ave,+Aurora,+Kane,+Illinois+60506&amp;t=h&amp;ll=41.773424,-88.316689&amp;spn=0.019203,0.025749&amp;z=14&amp;iwloc=A&amp;output=embed'; document.getElementById('largeMapLink').href='http://www.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=819,+oak+ave,aurora,il,60506&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=29.910058,56.162109&amp;ie=UTF8&amp;hq=&amp;hnear=819+Oak+Ave,+Aurora,+Kane,+Illinois+60506&amp;t=h&amp;ll=41.773424,-88.316689&amp;spn=0.019203,0.025749&amp;z=14&amp;iwloc=A';"
            href="#">Aurora</a> 
            <br />819, Oak Ave,
            <br />Aurora, IL , 60506
   </div>
            <p>Phone: 630-479-0132<br/>E-mail: <a
            href="mailto:support@BeCounseling.com"
            target="">support@BeCounseling.com</a></p><iframe id="googleMap"
            height="300" marginheight="0"
            src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=68,Main+Street,Oswego,IL,60543&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=29.910058,56.162109&amp;ie=UTF8&amp;hq=&amp;hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&amp;t=h&amp;ll=41.684066,-88.352222&amp;spn=0.01923,0.025749&amp;z=14&amp;iwloc=A&amp;output=embed"
            frameborder="0" width="300" marginwidth=0
            scrolling="no"></iframe><br/><small><a
            style="TEXT-ALIGN: left; COLOR: #0000ff" id="largeMapLink"
            href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=68,Main+Street,Oswego,IL,60543&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=29.910058,56.162109&amp;ie=UTF8&amp;hq=&amp;hnear=68+S+Main+St,+Oswego,+Kendall,+Illinois+60543&amp;t=h&amp;ll=41.684066,-88.352222&amp;spn=0.01923,0.025749&amp;z=14&amp;iwloc=A">View
            Larger Map</a></small> 

Open in new window

0
 
LVL 2

Author Closing Comment

by:jhacharya
ID: 35135135
brilliant works just as expected .. thanks again for the help
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now