Google Maps (and .asp) - Newbie help needed

[kessa]

Hi Guys,

I thought I'd have a go at creating a Google maps mashup (as it's something which I'm quite keen to learn how to do), but I seem to have fallen at one of the first hurdles and after 3 days of solid searching / trying different things I don't seem to have got any further, so thought it was time to ask for help :o

Aim of the Mashup:
Ultimately what I would like to be able to do is:

Back end:
a) allow registered users to plot their location on the map (I'll set up the database using .asp and Access)
b) allow users to update their location on the map (I'd quite like to be able to use the Draggable Markers (http://www.google.com/apis/maps/documentation/index.html#Draggable_Markers)option for this)
c) ensure that users will only be able to display one location for themselves.
d) allow users to specify an account type (required) - this will display a different colour icon on the front end - originally I'd planned on getting users to specifiy their account type by just selecting it from a drop down in the admin area.... unless there's a way to let them select the icon appropriate to their account, and then drag it on to the map?

Front end:
a) display all users on the map
b) use a technique similiar to the one shown at http://labs.google.com/ridefinder to display a different coloured icon depending on the users account type (see note above)
c) use the Weather Map (http://www.google.com/apis/maps/documentation/index.html#Marker_Manager_Weather) example / technique of displaying only a certain number of results depending on the zoom level.
d) when a marker is hovered over, display a window which shows some basic info (grabbed from the DB) and an image - I might opt for the tabbed window solution for this depending on the amount of content

Progress so far:
I'm the first to admit that I've progressed very little in 3 days :o :( I guess I should emphasise at this point that whilst I'm more than happy coding in XHTML and CSS, my .asp skills are "developing" and my JavaScript skills are pretty much nill (I can read it, and get the gist of what's going on, but I can't code in it yet)


<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(54.162433999999998, -3.6474609999999998), 4);

//listen for clicks (** This bit works - do not remove yet **)
GEvent.addListener(map, "click", function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else {
map.addOverlay(new GMarker(point));
}
});


}
}

//]]>
</script>


So as you can see - so far all I've managed to do is allow users to add / remove an unlimited number of markers... which isn't very helpful at all :(

I've checked out the tutorials, and have posted on the Google Discussion Board (only had 1 reply there so far), and checked out a few other sites, but just keep coming up against the same problems - which is that most sites assume that you have a good knowledge of JavaScript and API's - there doesn't seem to be any such thing as a real "beginner's guide"

Any ideas?

If someone could just let me know how to go about:

a) finding out the location of a marker when it's been placed
b) how to save this using .asp (i.e. to I somehow just assign this to a variable?)
c) how I can limit the marker to just one per user

... that should be enough to get me going again.

I'm not after someone to create all of the code for me (although if someone already has the code and want's to share it I certainly wouldn't mind ;) ) but I'm more than happy to learn if I can get a pointer in the right direction.

Thanks
Kessa

[kessa]

anyone? :(

Thanks
Kessa

[Chikara]

So basically you are using javascript to place a pointer on a map correct?

How exactly are you doing that? By moving a pointer image on top of a map image?. It sounds to me that when you click you are just dropping an image onto a point on another image.

Answer that then I can help you more. Really this is more of a javascript question rather than an ASP one at this point. I can help you with some javascript basics, but that API should have everything that you need in it if you explore it a little more.


Now on to the ASP related questions.



b) how to save this using .asp (i.e. to I somehow just assign this to a variable?)
Depends where you want to save things. I recommend a DB solution. Just have each person create an account and save the coords of their marker in the DB. A simple table could have just the userID as the key, username, password, coords.

c) how I can limit the marker to just one per user

Again, use a DB to make a user log into your page. Make only their marker moveable. There really isn't another way to do this with any degree of security/reliablity. The most straight forward solution is to use a DB of some sort to store this info.

[kessa]

Hi Chikara,

Sorry, yes - as mentioned, my aim is to store this in a database. However, I'm not sure how I actually "get" the co-ordinates in order to "put" them in the database (I hope that makes more sense?)

Also, I'm not sure about how I limit it to just 1 marker. I've tried doing stuff like:

var i=0

if (i<1 then) {
do function
};

... but that didn't work (perhaps my synax is wrong? like I say, I'm new to JavaScript :o )

Fair point about this perhaps being more of a JavaScript issue than an .asp one.

Note to Moderator: Would it be possible to move this post to the JavaScript forum?

Kessa

[Chikara]

Might be off here, but wouldn't the coordinates of the marker be found right here?

map.setCenter(new GLatLng(54.162433999999998, -3.6474609999999998), 4);

So the coords of that marker are 54.1624. . . , -3.647460. . .?


Your one marker problem can be solved by checking to see if a user already has a point on the map. If they do you can use change the setPoint() value to false.

[Chikara]

Please ignore my previous post as it will be misleading/wrong.

This will only let one point be drawn on the map. All I did here was put a var called myPoint at the beginning of this function. Later I compare this value and if a point has been drawn, it will stop you.

You can use the same type of solution if you are using click to add points. I will look into a way to return the coords of a given GMarker next.
<!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=api&amp;v=2&amp;key=ABQIAAAAewq6haBtPFlOZ1pqFP8MFRQujviKnrTFITShHtbnTtgRJcB9rxRLdY9R0KiqfOfpRmlnj5 6mkUtkRg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
var myPoint = false; //No point has been placed. This will need to be replaced checking to see if a user has a point in saved in the DB.
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
var point1 = new GLatLng(37.4419,-122.1419);
if (myPoint == false)
{
map.addOverlay(new GMarker(point1));
myPoint = true;
}
if (myPoint == false)
{
alert("I have do not have a point!");
map.addOverlay(new GMarker(point));
}
else
alert("I have a point!");
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

Ok found out how to return a coord. Google did a fantastic job of documenting this API. Please find all the objects documented here. http://www.google.com/apis/maps/documentation/reference.html

The GMarker object has a method called GetPoint(). This will return a GLatLng and which are the coords.

[kessa]

Awesome - thanks Chikara! :)

It's now working so that I can add a single marker (and I've also got a demo working for the front end which displays multiple markers)... so things are moving on nicely again (phew!)

Next question (and this should be an easy one for you :o ) I'm trying to display what the location is (for debugging purposes) so that I can see how to save the location to a variable which I can then grab with .asp

However, when I use the following code it doesn't display anything:

var displaypoint = getPoint();
document.write(displaypoint);

.....am I doing something wrong?

Also, this part is declared along with the rest of the code in the <head></head> section so do I need to move it all into the <body> section?

Thanks
Kessa

[kessa]

Update:

me again - think I might have it sorted ;) (but I'd appreciate it if you could run your expert eye over it)


map.addOverlay(new GMarker(point));
var marker = (new GMarker(point));
hasPoint=true;

// determine the location of the point
var pointLocation= marker.getPoint();
document.getElementById("location").innerHTML = pointLocation.toString();


... and then I'm just using <p id="location"></p> to display the location for testing purposes.

The bit which I was missing was the marker declaration which I solved by adding: var marker = (new GMarker(point));

- so to sum up... it's working... but I'm not sure if I'm going about it correctly... of whether I've just botched something together which just happens to work!?!

Cheers
Kessa

[Chikara]

Update:

me again - think I might have it sorted ;) (but I'd appreciate it if you could run your expert eye over it)


map.addOverlay(new GMarker(point));
var marker = (new GMarker(point));
hasPoint=true;

// determine the location of the point
var pointLocation= marker.getPoint();
document.getElementById("location").innerHTML = pointLocation.toString();


... and then I'm just using <p id="location"></p> to display the location for testing purposes.

The bit which I was missing was the marker declaration which I solved by adding: var marker = (new GMarker(point));

- so to sum up... it's working... but I'm not sure if I'm going about it correctly... of whether I've just botched something together which just happens to work!?!

Cheers
Kessa

If it works it works :)

One thing you might want to keep in mind is that I *believe* innerHTML is an IE only property. I'm not sure if the coords will display correctly in firefox or other browsers.

Glad I could help you along. Let me know if there is anything else I can help with.