The bounds of the rectangle - north, south, east, and west - are calculated by the farthest extremes of all the latitudes and longitudes of the markers. You have also added a rectangle shape to the map. And this array has been populated with a couple of random locations. The code has an array to hold all the markers for the map. In this tutorial, the markerClick will trigger addMarker which will drop a new pin with a different opacity. markerClick which allows you to handle events when a user clicks on a single marker.markerDraggable which allows the user to click, hold, and drag the marker around the map.opacity which changes how transparent the marker looks.In this example, when a user clicks the map, it adds a new marker to the map. mapClick emits an event whenever a user clicks somewhere on the map. Zoom tells how far in or out to display the map initially 0 is the farthest out to show, and depending on the location and type of map, it goes up to about 22. Open the file and modify it to use agm-marker and agm-rectangle: Component ( įirst of all, you have set two additional properties on the map itself: an input to zoom and an event handler to mapClick. However, you may also place any number of markers and shapes at any location on your map. Initializing the component with a latitude and longitude value will center the map at that particular coordinate. This tutorial will only cover drawing shapes on your map, but it would be well worth checking out the full documentation on all of the options available to you. There are also some other configuration options you can set. Within the component’s template, you can add a number of other components. Step 3 - Building an Advanced Map Component with Markers and Bounds When visiting your application in a web browser, you should see a Google Map with a satellite view centered on Honolulu, Hawaii. Then, start the application to observe what you have so far.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |