|
|
|||||||||
|
|||||||||
|
|||||||||
| |
||
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
||||
|
||||
|
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. |
|
#2
|
|||
|
|||
|
Quote:
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/ |
|
#3
|
||||
|
||||
|
What is the essential steps to embed a map similiar to yours in .net page?
|
|
#4
|
||||
|
||||
|
Quote:
Very cool... I may try and implement that into our company portfolio... |
|
#5
|
|||
|
|||
|
Quote:
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. |
|
#6
|
||||
|
||||
|
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);
__________________
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. |
|
#7
|
||||
|
||||
|
just curious, is this javascript cross browser? anyone tested everything
in both IE and Firefox? |
|
#8
|
||||
|
||||
|
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...
|
|
#9
|
||||
|
||||
|
Quote:
![]() |
|
#10
|
||||
|
||||
|
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. ![]() |