I created an example of a Google Map application where you can plot markers on the map by specifying coordinates.
Creating markers is fairly simple:
1. Create a new instance of GLatLng object. The GLatLng holds the coordinates of your marker.
// create new location object var location = new GLatLng(latitude, longitude);
2. Create a new instance of GMarker with the GLatLng object.
// place new marker var marker = new GMarker(location);
3. Use the addOverlay method to create a new overlay in the map.
map.addOverlay(marker);
Just like we add an overlay to create a marker, we clear a marker by removing an overlay.
map.removeOverlay(markersArray[idx]);
The markersArray[idx] is the GMarker we would like to remove. If you are not using an array to keep your markers, you can pass in an instance of GMarker directly.
I don’t know why but I found it really difficult finding out how to create a marker on Google maps but you have made it really simple here and your app is very neat.
Thanks
Thanks for the feedback! Glad it was helpful to you.
This is the best Google Maps marker tutorial on the Web
I think simple always better
I’m very glad to found it
Thx a lot
Thank you for the feedback Norad. :)
Somehow i missed the point. Probably lost in translation :) Anyway … nice blog to visit.
cheers, Ionizer!!!
I stumbled across this page through Google. No background in Google maps, not really a programmer (engineer), but looks like your code includes a javascript instantiation of an object called GLatLng & GMarker. Is this a custom object, or some library that needs to be loaded similarly to the “use” statement in Perl?
Appreciate any tips or recommendations for tutorials.
dan
The GLatLng and GMarker objects are part of the JavaScript library provided by the Google Maps API.
To use them in your solution you need to include the library to your code (similar to loading a module in Perl). To do that you need to include:
Where key “ABCDEFG” needs to be created for your page. You can generate your own key from http://code.google.com/apis/maps/signup.html.
You can find more details in their documentation http://code.google.com/apis/maps/documentation/index.html.
Your suggestions on markers have been very useful, do you know how can I change the color of the markers?
Thanks Didac. The markers are simply gif images, so you can create your own coloured markers by creating your own images.
Google shows you how to apply random markers. Huh? You are posting exactly what I was looking for. Google needs you. You rock.
I ditto what’s been said already – this is a GREAT post.
I stumbled across this whilst looking for instructions on how to place a marker on a google map – I had visited two sites before this and followed the instructions on each site but to no avail. Your instructions were clear and more importantly it worked!
YAY!
Thank you.
Thanks Jeni
Hi Marcel,
I want to add about 500 markers to my google map. The coordinates for the point are stored in a file. Do you know of a fast and efficient way to add all these markers directly from the file to the map without having to write hundreds of lines of code?
Your help is appreciated
Hachim
Hi Hachim. A quick way to do it is to read the locations from the file, store it in the Javascript array, and load it in your map. You can read the file through a PHP script or whatever other language you are using.
I suspect though that you will run into scalability issues putting in 500 markers in one go. It might be worth having a read at the Clustering/Marker Manager (http://googlemapsapi.blogspot.com/2007/08/dragzoom-marker-manager-cluster-zoom.html).
Thanks for the post.
It helps me a lot.
I’ve been working with basic markers for a while, and although I have got to put them on my map ok, what I want to do is ADD to the map, rather than replace the existing marker with a new one.
I’m using this function to place the markers:
izoom = GetZoom();
map = new GMap2(document.getElementById(“map_canvas”));
map.setCenter(new GLatLng(latitude, longitude),parseInt(izoom));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_HYBRID_MAP);
{
var html_info = ” + desc + ”;
var point = new GLatLng(latitude, longitude);
marker = new GMarker(point,G_DEFAULT_ICON);
GEvent.addListener(marker, “click”, function()
{
marker.openInfoWindowHtml(html_info);
});
map.addOverlay(marker);
GEvent.trigger(marker, “click”);
GEvent.addListener(map, “zoomend”, function()
{
var zoom = map.getZoom();
izoom = (zoom.toString());
UpdateZoom(izoom);
} );
}
Can you see why it’s replacing rather than adding??
Great post!
All you need to do is replace the (latitude, longitude) with your own coordinates.
Cheers!
Thanks for the post. Google’s example shows how to add random markers — not too helpful :)
Thanks so much. Google doesn’t seem to give any but a bunch of randomized markers, wich confuses me a lot
Hi Beesee. You should be able to apply your own images to your markers.
Thanks for a valuable post,
Can u please help me in the following case..
I want to make a marker points at page-load and these points should be from database(i.e. property listings at different locaion) so can you help me out in sketching out the script
I am working on PHP/ Mysql and Java
for instance visit : http://www.bayut.com/index.php?body=gmap2&category=5002&name=Dubai&purpose=1
Hi Marcel.
We are doing a volunteer work for Global Green Map organization here in the Philippines. Pls visit our site if you have time: http://www.philippinegreenmap.org. This is so far the best we can do in terms of map display and functionality. I stumbled on your site and I think this is what we envisioned it should be.
I’m just a neophyte and no programming knowledge. Hope you can lend use the code so we can reuse it in our site.
Thank you so much.
Jobo
Hi Marcel, well done. Simple and it works really easily. The fact is that the Google tutorial is rubbish. One minute you understand everything and the next they have you placing ten markers in random positions on a map of Palo Alto. What earthly use does the person who wrote that tutorial think that is to anyone? all you need to get started is to place a marker where you want it – probably on the co-ordinates of your client’s business premises – especially if you are making a living building websites and time is money. The Google tutorial is a typically thoughtless example written by some person who is so glad that he understands what he has written that he forgets what his job is and goes off at a useless tangent. Many thanks for this. Now I can get back to making a living instead of spending hours reading through a trashy tutorial that gets me nowhere.
Thank you. Glad you found it helpful.
I don’t know how to incorporate those 4 lines you give into the entire script.
Please put the whole chunk of script from start to end tags so I can get started. I’ve got a map working but your code does not produce a marker on my map.
Thanks
Any chance to get the source code? great work!