Add markers to Google Maps

In the previous post, I had shown you how to embed a simple map to the web page. In this post, I will let you know how to add an marker to the map.

The marker object resides in the google.maps.Marker namespace and takes a single argument, options. Options is an object literal called Marker options that can have several properties of which two are required:

• map
  Map is a reference to the map where you want to add the marker.
• position
  This property indicates the location of the marker and is of type google.maps.LatLng

The following javascript shows a map centered on Ho Chi Minh city, Vietnam. Besides, you can see the red balloon, it is the marker that I just added on.

        var latlng = new google.maps.LatLng(10.823099, 106.629664);
        var myOptions =
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(10.823099, 106.629664),
            map: map
        });

Hope this helps!

Read more:

Displaying jquery popup when clicking on an image link in infowindow
Working with a simple infowindow in google map
Adding a tooltip to marker
Multitab infowindow in Google Map V3
Embedding a google map to the web page

Posted in: Google Maps, Marker