How can I position a marker on a map using GeoLocation?

Question

I am creating a map page with a single image, and I would like to use GeoLocation to show where the user is as a blue dot (somewhat like iOS maps).

I already have the JavaScript for finding the location, and it works great. I just need help with how to place a marker - just a simple image - on the page according to the output of position.coords.latitude and position.coords.longitude.

Is there any way that this can be done, and if so, how?
Thanks in advance.

Answer 1

You can simply use GMarker in your javascript, something like this:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Hello World!"
});

You can customize its image like that:

var image = 'beachflag.png';
marker.icon = image;