Why use Map Markers?
Google maps have many features, one of the more important features is being able to draw markers at particular places within the map. This is important if you need to show, for example, the exact location of your company. Or you may want to plot all of your favorite restaurants in your town. In this basic lesson you'll learn how to draw a marker, and in the next lesson you'll learn how to display information when the user of your site passes the mouse pointer over your markers. This would be most important when you have more than one marker on your map.
Your First Marker
First we'll start with a single marker. It takes suprisingly little code to draw a marker on a Google map. All you need to do is find out the latitude and longitude of the point you're interested in and plug that into an object (a package of data, and sometimes code) that you create with JavaScript. This object is then used to inform the function that follows where to draw the marker. Then you just need to add the marker (called a "GMarker" for "Google Marker") with a function provided by Google called "addOverlay". Here's how the code looks:
// first set the center point of the marker var latlng = new google.maps.LatLng(37.775196, -122.419204); // now, create the marker var marker = new google.maps.Marker({ position: latlng, map: map, title:'San Fransisco' });
The first line of the code says: "create a new variable called "latlng" to hold a set of two numbers, the latitude and the longitude".
In the second line, you see the "map: map,". This "map" name is actually the name of the map object you created in the "
Your First Google Map". lesson. If you called the map: "mymap", then the second line must be "map: mymap,". If you called it "george" then
the second line would e with "map: george,", and so on and so on...
And just to remind you, as was shown in that first map lesson, you need to have a <div> tag within the <body> section of your HTML with an ID corresponding to the name of the map, so in our example it looks like:
In the final product we have a map of San Francisco with a marker. The marker doesn't do anything in this case. It is only a place-holder. In the next lesson, we'll add something useful to this marker.