Google Maps Directions API is a powerful tool for displaying route information on maps. By default, it shows markers at the origin and destination points of the route, as well as waypoints along the way. However, sometimes you may want to customize these markers to better fit your use case or branding. In this article, we will explore how to change individual markers in Google Maps Directions API V3.
Setting up the map and directions service
Before we begin, let's first set up a basic map and directions service using the Google Maps JavaScript API. First, include the API script in your HTML file:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
Make sure to replace YOUR_API_KEY with your own Google Maps API key.
Next, create a div element to hold the map:
<div id="map"></div>
Then, initialize the map and directions service in your JavaScript code:
-- -------------------- ---- ------- ----- --- - --- ----------------------------------------------- - ----- --- ------- - ---- -------- ---- --------- -- --- ----- ----------------- - --- -------------------------------- ----- ------------------ - --- -------------------------------- ---- ---- ---
This sets up a map centered on San Francisco, with a default zoom level of 14, and initializes the DirectionsService and DirectionsRenderer objects.
Changing individual markers
To change individual markers in a route, we need to use the suppressMarkers option when creating the DirectionsRenderer object. This prevents the default markers from being displayed.
const directionsRenderer = new google.maps.DirectionsRenderer({
map: map,
suppressMarkers: true,
});Next, we can use the setMarkerOptions() method of the DirectionsRenderer object to customize individual markers. This method takes an array of MarkerOptions objects, one for each marker in the route. The index of each MarkerOptions object corresponds to the index of the corresponding waypoint in the route.
-- -------------------- ---- -------
----- ------------- - -
-
--------- - ---- -------- ---- --------- --
------ ----
----- ---------------------------------------------------------
--
-
--------- - ---- -------- ---- --------- --
------ ----
----- ----------------------------------------------------------
--
--
---------------------------------------------------In this example, we have customized the markers at the origin and destination points of the route. We set the position of each marker using the position property, added a label using the label property, and changed the icon using the icon property.
Putting it all together
Here is the complete code for displaying a route with customized markers:
-- -------------------- ---- -------
---- ---------------
--------
----- --- - --- ----------------------------------------------- -
----- ---
------- - ---- -------- ---- --------- --
---
----- ----------------- - --- --------------------------------
----- ------------------ - --- --------------------------------
---- ----
---------------- -----
---
----- ------- - -
------- - ---- -------- ---- --------- --
------------ - ---- -------- ---- --------- --
----------- -------------------------------
--
-------------------------------- -------- ------- -- -
-- ------- --- -------------------------------- -
----- ------------- - -
-
--------- ----------------------------------------
------ ----
----- ---------------------------------------------------------
--
-
--------- --------------------------------------
------ ----
----- ----------------------------------------------------------
--
--
-----------------------------------------
---------------------------------------------------
-
---
---------This code displays a route from the starting point to the ending point, with customized markers at each end. You can modify the markerOptions array to customize additional markers along the route.
Conclusion
Customizing individual markers in Google Maps Directions API V3 allows you to add branding or additional information to your route maps. By using the suppressMarkers and `
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30435