Adding Markers On Google Maps

The Google Maps API allows developers to lớn add points, lines & polygons to lớn the bản đồ as overlays.

Bạn đang xem: Adding Markers On Google Maps

Point overlays are the most common và are represented in the API as Marker objects. We"ll use the API Reference as a guide khổng lồ adding a marker to lớn our maps.

Follow the MarkerOptions link to view its documentation.chú ý that this class does not have a Constructor section in its documentation. This indicates that creating an object of this class involves using the object literal notation that we encountered earlier when we created a MapOptions object. Of the many properties listed beneath MapOptions, two are particularly important:position: mix using a LatLng object defining the point where you want the marker lớn appear, andmap: mix using a reference to lớn the Map object on which the marker should be added. Follow the LatLng liên kết to lớn jump to lớn its section.The LatLng class constructor lists two required parameters (lat & lng). As implied by their names, these parameters are specified using numbers representing the desired point"s latitude và longitude. The third, optional, parameter can be phối lớn True khổng lồ allow for lat/lng values outside -90/+90 và -180/+180.So, with the information we"ve sầu gathered from the API reference, we know that the steps for adding a marker to lớn the maps are to create a LatLng object, use that object lớn create a MarkerOptions object, then create a Marker object using the MarkerOptions object as an argument to lớn the Marker class constructor.Open your lesson3.html file in any text editor. We"re going lớn add our marker in the same location that"s being used for the map"s center.

Xem thêm:

Rather than specify the marker"s position using an object literal as the Hello, World example specifies the map"s center, let"s create a LatLng object, store a reference lớn that object in a variable, then use the variable lớn mix the marker"s position.

Insert the following line to the over of the initMap() function:

var latlng = new google.maps.LatLng(-34.397, 150.644);Next, create a MarkerOptions object và mix its position and map properties:var myMarkerOptions = position: latlng, map: mapFinally, create the Marker & add it khổng lồ the map:var myMarker = new google.maps.Marker(myMarkerOptions);Save the page & chạy thử it in your web browser.You may have sầu noticed (and been confused) that latlng appears in the script as both the name of a variable & a class. The same goes for map. It"s actually OK if this happens, but let"s rename these variables to lớn make the script a bit easier khổng lồ follow.Change the name of the variable that references the LatLng object from latlng to myLatLng. chú ý that changing this name requires updating the position property of the MarkerOptions object.Change the name of the variable that references the Map object from map lớn myMap. This requires updating the lines where the variable is declared, where it"s initialized & where the map property of the MarkerOptions object is mix. Here is the complete script if you"d like khổng lồ confirm that you wrote it correctly:var myMap;function initMap() myMap = new google.maps.Map(document.getElementById("map"), center: lat: -34.397, lng: 150.644, zoom: 8 ); var myLatLng = new google.maps.LatLng(-34.397, 150.644); var myMarkerOptions = position: myLatLng, map: myMap var myMarker = new google.maps.Marker(myMarkerOptions);Going forward, you will not be expected to lớn preface your variable names with "my" as we"ve sầu done here. My rationale for doing it here is to help clarify what"s a variable (changeable) và what"s a property or class (not changeable). 

Now that you"ve seen how to add a marker to lớn a maps, you"re ready lớn modify your page so that it displays your hometown. If you see problems with the way the initMap() function was written above sầu, that"s good because I"ll be expecting you to write the code more efficiently as part of your assignment.