Google maps API - ASP Free

ASP Free Forums Sponsor:

October 17th, 2006, 11:38 AM

D.O.M.I.N.A.T.O.R

Kingpin contributor

Join Date: Nov 2005

Location: P.E, RSA

Posts: 1,051

Time spent in forums: 1 Week 4 Days 2 h 12 m 16 sec
Reputation Power: 201

Google maps API

Hi guys,

Any of you used the Google map API to embed the customized maps into your website - maybe as part of an search? I am planning to use it in my next deployment...

Would be interested to hear your comments.

Jo.

__________________
Fitness & Diet resources

Career Descriptions

Boat Cruises
All code that is posted by me has not been tested, and it should only be interpreted as a guideline to a solution. There is no guarantee that any of my code samples will work as provided, and should be customized to suite the required need.

Last edited by D.O.M.I.N.A.T.O.R : October 17th, 2006 at 11:59 AM.

October 18th, 2006, 04:47 AM

pws1970

Contributing User

Join Date: Aug 2005

Posts: 3,250

Folding Points: 20017 Folding Title: Starter Folder

Time spent in forums: 4 Weeks 1 Day 4 h 5 m 50 sec
Reputation Power: 363

Quote:

Originally Posted by D.O.M.I.N.A.T.O.R

I already implement them into my sites, the clients love them and the feedback from people browsing the site has been extremely positive.

Heres a couple of the sites that I have designed with the maps embedded in the page:

http://harperskilts.co.uk/map.html
http://www.allfloorsglasgow.co.uk/

Comments on this post

D.O.M.I.N.A.T.O.R agrees: Very nice mate!

October 18th, 2006, 11:55 AM

D.O.M.I.N.A.T.O.R

Kingpin contributor

Join Date: Nov 2005

Location: P.E, RSA

Posts: 1,051

Time spent in forums: 1 Week 4 Days 2 h 12 m 16 sec
Reputation Power: 201

What is the essential steps to embed a map similiar to yours in .net page?

October 18th, 2006, 11:59 AM

chapman10s

**Wanted Wizard**

Join Date: Apr 2006

Location: Who knows...

Posts: 5,410

Folding Points: 12139 Folding Title: Novice Folder

Time spent in forums: 3 Weeks 4 Days 12 h 36 m
Reputation Power: 1331

Quote:

Originally Posted by pws1970

Very cool... I may try and implement that into our company portfolio...

October 18th, 2006, 04:27 PM

pws1970

Contributing User

Join Date: Aug 2005

Posts: 3,250

Time spent in forums: 4 Weeks 1 Day 4 h 5 m 50 sec
Reputation Power: 363

Quote:

Originally Posted by D.O.M.I.N.A.T.O.R

What is the essential steps to embed a map similiar to yours in .net page?

Not sure if there is any special requirements for a .net page - so I'll just go through the basics.

First - Register your site to get your key for that url: http://www.google.com/apis/maps/signup.html

Once that's done then you'll receive your key, which'll look like similar to this one (by the way - the key is good for all pages found in that url):

Code:

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvu1F0pDh2uRFZkOdeS4x0xT-tk2q-OfkWwWLIK_YklfeQUlRqxTF1g6_6CrvzcujhOg3Yi8fIJHviQ"
      type="text/javascript"></script>

Just embed this between your head elementa as per usual with javascript.

The next part is how you want your map to appear and if any bells and whistles you wish to stick on it:

Code:

    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(55.857048,-4.249901), 13);
		map.openInfoWindow(map.getCenter(),
                   document.createTextNode("Harpers Highland Dress."));
		map.addOverlay(new GMarker(map.getCenter()));
      }
    }
    //]]>
    </script>

The above gives me my long/lat co-ordinates and at what level I wish to start the map at: range of view -- map.setCenter(new GLatLng(55.857048,-4.249901), 13); if I wanted to go in deeper (closer) when the page loads then I would change 13 to 10 for instance.

I then wanted a marker for my geo location and a little bubble with text to show the companies name:

Code:

map.openInfoWindow(map.getCenter(),
                   document.createTextNode("Harpers Highland Dress."));
		map.addOverlay(new GMarker(map.getCenter()));

You can get a whole lot more from the API documentation: http://www.google.com/apis/maps/documentation/

After that you just call the map on load and release it page unload from the body tag:

Code:

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

Then of course display it in your page with a couple of div tags.

Code:

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

And that's it pretty much. So I don't think even if your page has a .aspx extension will there be any extra coding.

Comments on this post

D.O.M.I.N.A.T.O.R agrees: Great help. Thanks again - owe you some more rep at later stage again...

October 18th, 2006, 09:13 PM

mehere

Senior Sarcasm Wizardess

ASP Free God 16th Plane (12500 - 12999 posts)

Join Date: Feb 2005

Location: Dreamland

Posts: 12,870

Folding Points: 10976 Folding Title: Novice Folder

Time spent in forums: 4 Months 4 Weeks 17 h 11 m 51 sec
Reputation Power: 1762

~~hey pws ... how do you go about getting the longitude and lattitude for your address?~~

nevermind ... found it i went to http://geocoder.us/ and was able to get it.

i also found a way to get multiple lines in the bubble if anyone is interested.

i added:

Code:

var html = "<p style='color: #135192; font-family: tahoma, helvetica, arial, sans-serif; font-size: 0.80em;'><strong>Company Name</strong><br />123 Main Street<br />Anytown, USA</p>";

then changed:

Code:

map.openInfoWindow(map.getCenter(),
                   document.createTextNode("Harpers Highland Dress."));

to this:

Code:

map.openInfoWindowHtml(map.getCenter(), html);

Comments on this post

pws1970 agrees: Now that I likey, cheers mehere.

D.O.M.I.N.A.T.O.R agrees: Thanks for that contribution mehere

__________________
Come JOIN the party!!!

Quote of the Month:
Retirement: Because you've given so much of yourself to the company that you don't have anything left we can use.

Questions to Ponder:
What do you do when you see an endangered animal eating an endangered plant?

iif([sarcasm]=true,iif([you have to ask]=true,"didn't work","ha ha ha"),"not sarcasm")
copyright© 2008 sbenj69

Last edited by mehere : October 18th, 2006 at 10:50 PM.

October 19th, 2006, 02:40 AM

Shadow Wizard

Moderator From Beyond

ASP Free God 46th Plane (27500 - 27999 posts)

Join Date: Sep 2004

Location: Israel

Posts: 27,932

Folding Points: 391471 Folding Title: Super Ultimate Folder - Level 1

Time spent in forums: 3 Months 2 Weeks 12 h 17 m 53 sec
Reputation Power: 2002

just curious, is this javascript cross browser? anyone tested everything
in both IE and Firefox?

__________________

Visit The Windows Scripting Guru

October 19th, 2006, 02:56 AM

richyrich

Contributing User

Join Date: Jun 2004

Location: Somewhere only we know...

Posts: 4,198

Folding Points: 129148 Folding Title: Super Ultimate Folder - Level 1

Time spent in forums: 2 Months 1 Week 1 Day 23 h 27 m 42 sec
Reputation Power: 1227

I've just tried all the buttons in IE6, IE7 and FF from paul's harperskilts site.

All work fine...

__________________
Policy Check

I'd rather have a full bottle in front of me, than a full frontal lobotomy...

October 19th, 2006, 03:38 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 27,932

Time spent in forums: 3 Months 2 Weeks 12 h 17 m 53 sec
Reputation Power: 2002

Quote:

Originally Posted by richyrich

I've just tried all the buttons in IE6, IE7 and FF from paul's harperskilts site.

All work fine...

cool, that's lot of JS for me to explore when I'll have the time!

#10

October 19th, 2006, 03:49 AM

richyrich

Contributing User

Join Date: Jun 2004

Location: Somewhere only we know...

Posts: 4,198

Time spent in forums: 2 Months 1 Week 1 Day 23 h 27 m 42 sec
Reputation Power: 1227

Just quick update.

Couldn't get map to load in Netscape Navigator. Not sure if you can adjust Javascript settings in it.

Also tried in Opera and worked fine.