Adding Markers on Google Maps

I created an example of a Google Map application where you can plot markers on the map by specifying coordinates.

Google Map Markers

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.

About these ads

54 Responses to “Adding Markers on Google Maps”


  1. 1 Chris Price Friday, 22 February 2008 at 6:22 am

    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

  2. 2 marcelpad Tuesday, 4 March 2008 at 10:22 am

    Thanks for the feedback! Glad it was helpful to you.

  3. 3 norad Friday, 9 May 2008 at 8:02 am

    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

  4. 4 marcelpad Friday, 9 May 2008 at 10:14 am

    Thank you for the feedback Norad. :)

  5. 5 Ionizer Saturday, 21 June 2008 at 3:21 pm

    Somehow i missed the point. Probably lost in translation :) Anyway … nice blog to visit.

    cheers, Ionizer!!!

  6. 6 newbie Sunday, 27 July 2008 at 11:23 pm

    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

  7. 7 marcelpad Monday, 28 July 2008 at 9:51 am

    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.

  8. 8 Didac Friday, 8 August 2008 at 8:56 pm

    Your suggestions on markers have been very useful, do you know how can I change the color of the markers?

  9. 9 marcelpad Friday, 8 August 2008 at 10:35 pm

    Thanks Didac. The markers are simply gif images, so you can create your own coloured markers by creating your own images.

  10. 10 Buck Friday, 5 September 2008 at 3:20 pm

    Google shows you how to apply random markers. Huh? You are posting exactly what I was looking for. Google needs you. You rock.

  11. 11 Jeni Treehugger Friday, 5 December 2008 at 11:28 pm

    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.

  12. 13 Hachim Thursday, 1 January 2009 at 3:44 am

    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

  13. 14 marcelpad Thursday, 1 January 2009 at 5:51 pm

    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).

  14. 15 Amit Rajput Friday, 27 February 2009 at 12:23 am

    Thanks for the post.
    It helps me a lot.

  15. 16 Tym Wednesday, 11 March 2009 at 1:33 am

    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??

  16. 17 Matt Wednesday, 25 March 2009 at 2:19 pm

    Great post!

    All you need to do is replace the (latitude, longitude) with your own coordinates.

    Cheers!

  17. 18 Jonathan Monday, 6 April 2009 at 1:57 pm

    Thanks for the post. Google’s example shows how to add random markers — not too helpful :)

  18. 19 beesee Saturday, 23 May 2009 at 5:41 am

    Thanks so much. Google doesn’t seem to give any but a bunch of randomized markers, wich confuses me a lot

  19. 20 marcelpad Thursday, 28 May 2009 at 6:17 pm

    Hi Beesee. You should be able to apply your own images to your markers.

  20. 21 Peter Monday, 7 September 2009 at 1:51 am

    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

  21. 22 Jobo Tuesday, 6 October 2009 at 12:04 pm

    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

  22. 23 Roberto Tuesday, 13 October 2009 at 9:47 pm

    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.

  23. 24 marcelpad Tuesday, 13 October 2009 at 11:42 pm

    Thank you. Glad you found it helpful.

  24. 25 Peter Thursday, 15 October 2009 at 12:33 am

    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

  25. 26 vance Thursday, 29 October 2009 at 11:02 pm

    Any chance to get the source code? great work!

  26. 27 Jared Crossley Saturday, 16 January 2010 at 11:07 pm

    When trying to view your example I get “This site is temporarily unavailable. Please check back later or contact support.”

  27. 28 tina Tuesday, 23 February 2010 at 7:08 am

    Hi,

    this is simple and great, but I want to know to add multi lat lng makers in map, I’m getting it from xml file.

    Like this :

    var point = new GLatLng(parseFloat($(“lat”, this).text()),
    parseFloat($(“lng”, this).text()));

    but it’s not working, what is the best way to add multi marker in a map ?

    thanks

  28. 29 Iqbal Saturday, 26 February 2011 at 3:38 pm

    This is really helping me…
    want to display the bubble info in it how to do that?

  29. 30 Neeraj Monday, 28 February 2011 at 9:37 pm

    Excellent post!!

    Really simple to create a marker. Thanks a lot!

  30. 31 brandi Monday, 1 August 2011 at 3:59 pm

    I was searching through so many tutorials… I’m not much of a programmer, this was very simple and actually worked for me, very helpful. Thank You!

  31. 32 sedoyksa Friday, 4 November 2011 at 11:56 am

    link for example doesn`t work
    correct it pls!

  32. 33 Craig Stinson Tuesday, 1 May 2012 at 4:35 am

    Marcelpad I’ve been looking for a way to pin on a map RVSM Height Monitoring stations around the world and put it up on the web can you point me in the right direction to get started looking at your example might just be what I need

  33. 34 bit short url Monday, 24 September 2012 at 8:39 am

    I know this website offers quality based articles
    and additional information, is there any other site which provides these kinds of information in quality?

  34. 35 visit website Monday, 24 December 2012 at 2:44 pm

    Somebody essentially help to make significantly articles I might
    state. That is the very first time I frequented your website page and thus far?
    I surprised with the research you made to make this particular put up amazing.
    Wonderful job!

  35. 36 read more Saturday, 29 December 2012 at 4:10 pm

    Wow that was odd. I just wrote an incredibly long comment
    but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again.
    Anyway, just wanted to say fantastic blog!

  36. 37 Lilliana Wednesday, 13 March 2013 at 6:04 pm

    Wow, fantastic blog structure! How long have you been blogging for?
    you make blogging glance easy. The overall
    look of your site is magnificent, let alone the content!

  37. 38 Rk Wednesday, 3 April 2013 at 10:57 pm

    its nice and you can also use the following function also:

    var pMarker = []; // Array for markers

    function initialize() {
    var myLatlng = new google.maps.LatLng(19.101053, 72.881927); // default location
    var mapOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP // Map Type
    }

    var map = new google.maps.Map(document.getElementById(‘map-canvas’), mapOptions);

    // To display InfoWindow contents
    var contentString = ”+
    ”+
    ”+
    ‘Mumbai’+
    ”+
    test‘+
    ”+
    ”;

    var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 100 // Setting max width for infowindow
    });

    // To add marker
    var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: ‘Mumbai, Maharashtra’
    });
    pMarker.push(marker);

    google.maps.event.addListener(marker, ‘click’, function() {
    infowindow.open(map,marker);
    });
    }

    for more visit here http://www.etechpulse.com/2013/04/aspnet-add-marker-to-google-map-show.html

  38. 39 %anchor_text% Saturday, 11 May 2013 at 1:13 am

    Excellent web site. A lot of helpful information here.

    I am sending it to some friends ans also sharing in delicious.
    And of course, thanks to your effort!

  39. 40 business phone numbers Tuesday, 14 May 2013 at 6:57 pm

    I got this web page from my buddy who shared with me regarding this web
    page and at the moment this time I am visiting this website and reading
    very informative content at this time.

  40. 41 smoking mesothelioma Sunday, 26 May 2013 at 2:57 am

    3 maximum aperture, fixed lens mount, auto focus features, 2.
    four GHz which is why you want to invest in a jammer that can tamper
    this signal. s r CMOS sensor, BIONZ impression processor chip in addition to a Sony Grams
    contact with powerful (10x optical move, 25-250 mm range) wide-angel mega-zoom (26
    mm) help in choosing stunning golf swings quite possibly
    with low-light circumstances.

  41. 42 Jeramy Sunday, 2 June 2013 at 11:47 am

    While waiting for help, the homeowner may call their insurance provider
    to inform them of the problem and inquire if it’s part of the coverage. While some maintenance can be done by a homeowner, a good plumber or HVAC technician should be consulted to make sure that your heating system will run efficiently during the next winter season and for years to come. However, installing a bathroom in a basement that hasn’t
    already been stubbed for a bathroom can be very difficult and costly.

  42. 43 Childrens Desks Saturday, 8 June 2013 at 6:33 pm

    I visited various sites but the audio quality for audio songs existing at this web page
    is in fact marvelous.

  43. 44 solar iphone 4 charger Wednesday, 26 June 2013 at 12:33 pm

    Hi, Thank you for the nice writing. It in fact was a nice short read.
    I will come back to enjoy more of your good reads.
    when and, how can we communicate? Appreciate it!

  44. 45 http://www.eliminate-acne.com/ Friday, 19 July 2013 at 12:02 pm

    Hurrah, that’s what I was seeking for, what a information! existing here at this web site, thanks admin of this web page.

  45. 46 Spencer Friday, 19 July 2013 at 6:03 pm

    We stumbled over here coming from a different web page and
    thought I should check things out. I like what I see so now
    i’m following you. Look forward to finding out about your web page for a second time. Appreciate it!

  46. 47 simlock Samsung Monday, 9 December 2013 at 4:40 pm

    Touche. Outstanding simlock Samsung arguments. Continue the good effort.

    This valuable post formatki meblowe is invaluable. When may I garner more information?

  47. 48 transport medyczny Tuesday, 1 April 2014 at 8:36 pm

    Touche. Outstanding transport medyczny justifications.
    Keep up the amazing effort.

    This particular info transport medyczny is priceless.
    How could I find out more?

  48. 49 botox Radom Thursday, 17 April 2014 at 2:21 am

    Incredible points. Great botox Radom reasons.
    Continue the amazing work.

    This amazing info trec is priceless. When can one find out more?

  49. 50 tanie odżywki na masę Thursday, 17 April 2014 at 1:25 pm

    Incredible points. Great tanie odżywki na masę arguments.
    Maintain the great effort.

    This valuable post odżywki is invaluable.
    How do I find out more?

  50. 51 transport medyczny dolnośląskie Saturday, 19 April 2014 at 9:27 pm

    Hi, transport medyczny dolnośląskie just wanted to say, I loved this
    blog post p10895. It seemed to be inspiring transport
    medyczny dolnośląskie. Keep posting!

  51. 52 website Sunday, 20 April 2014 at 7:14 am

    Great delivery. Outstanding website points.
    Continue the amazing work.

    This kind of information website is priceless. Where may I get more information?

  52. 53 hmb Friday, 25 April 2014 at 1:27 pm

    What’s up, hmb I just wanted to tell you, I enjoyed this article 88228.
    This became practical hmb. Continue on writing!

  53. 54 strony internetowe Friday, 25 April 2014 at 2:28 pm

    Incredible points. Solid strony internetowe questions.
    Sustain the great spirit.

    This particular text strony www is priceless. How will I discover more?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Hello

My name is Marcel Tjandraatmadja, and I live in Melbourne, Australia. I have a special interest in PHP and web applications.
I also enjoy problem solving with C#, C, and C++.

My interests are also Aikido, roller blading, and music from my favorite bands.

Curriculum Vitae

See my linked in page here.

Contact

Drop me a message at marcel.tjandra@gmail.com.

my del.icio.us

Posts

html hit counter

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: