{"id":2112,"date":"2023-04-17T13:00:42","date_gmt":"2023-04-17T13:00:42","guid":{"rendered":"https:\/\/geopick.cityai.space\/?page_id=2112"},"modified":"2023-06-11T10:22:45","modified_gmt":"2023-06-11T10:22:45","slug":"google-maps-api","status":"publish","type":"page","link":"https:\/\/geopick.cityai.space\/index.php\/tutorials\/medium\/google-maps-api\/","title":{"rendered":"Google Maps API"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-9178d19\" data-block-id=\"9178d19\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-9178d19-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-b396038\" data-block-id=\"b396038\"><style>@media screen and (min-width:768px){.stk-b396038{flex:1 1 66.7% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-b396038-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-b396038-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-92a16fb\" id=\"learning-objectives\" data-block-id=\"92a16fb\"><h2 class=\"stk-block-heading__text\">Learning objectives:<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-e38603b\" data-block-id=\"e38603b\"><p class=\"stk-block-text__text\">At the end of the lesson, learners should be able to:<\/p><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Understand how to use the Google Maps API to create a map on a webpage.<\/li>\n\n\n\n<li>Understand how to fetch data from an external API and display it on a map.<\/li>\n\n\n\n<li>Understand how to add markers to a map and customize the marker icon based on data.<\/li>\n\n\n\n<li>Understand how to cluster markers with the marker clustering library.<\/li>\n\n\n\n<li>Understand how to add a legend and a print button to a map using HTML and CSS.<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-f2ebc05\" data-block-id=\"f2ebc05\"><style>@media screen and (min-width:768px){.stk-f2ebc05{flex:1 1 33.3% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-f2ebc05-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-f2ebc05-inner-blocks\">\n<nav class=\"wp-block-stackable-table-of-contents stk-block-table-of-contents stk-block stk-1718f6b\" data-block-id=\"1718f6b\"><p class=\"stk-table-of-contents__title\">Table of Contents<\/p><ul class=\"stk-table-of-contents__table\"><li><a href=\"#learning-objectives\">Learning objectives:<\/a><ul><li><a href=\"#overview\">Overview:<\/a><\/li><li><a href=\"#requirements\">Requirements:<\/a><\/li><\/ul><\/li><li><a href=\"#step-1-html-markup\">Step 1: HTML Markup<\/a><\/li><li><a href=\"#step-2-initialize-the-map\">Step 2: Initialize the Map<\/a><\/li><li><a href=\"#step-3-using-marker-clusterer-and-usgs-api-to-display-earthquake-data-on-map\">Step 3: Using MarkerClusterer and USGS API to Display Earthquake Data on Map<\/a><\/li><li><a href=\"#step-4-implementing-a-print-button-for-the-map-view\">Step 4: Implementing a Print Button for the Map View<\/a><\/li><li><a href=\"#step-5-final-step-save-html\">Step 5: Final step. Save HTML<\/a><\/li><li><a href=\"#conclusion\">Conclusion:<\/a><\/li><\/ul><\/nav>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-f3d58e0\" data-block-id=\"f3d58e0\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-f3d58e0-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-de1c941\" data-block-id=\"de1c941\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-de1c941-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-de1c941-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-b2f0fdc\" id=\"overview\" data-block-id=\"b2f0fdc\"><h3 class=\"stk-block-heading__text\">Overview:<\/h3><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-249063b\" data-block-id=\"249063b\"><p class=\"stk-block-text__text\">In this lesson, we will be creating a map of earthquakes that occurred in Kyrgyzstan over the past decade using the Google Maps JavaScript API and earthquake data from the <a rel=\"noreferrer noopener\" href=\"https:\/\/earthquake.usgs.gov\/earthquakes\/search\/\" target=\"_blank\">United States Geological Survey (USGS).<\/a> We will learn how to request data from an API and plot markers on a map based on the coordinates of each earthquake. Additionally, we will use marker clustering to group nearby earthquakes and create a legend to show the magnitude of each earthquake. By the end of this tutorial, you will have a better understanding of how to work with APIs and create interactive maps using the Google Maps JavaScript API.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-a3019b4\" data-block-id=\"a3019b4\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-4b4ab9c\" data-block-id=\"4b4ab9c\"><style>.stk-4b4ab9c .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/06\/Level_2_Google_Maps_API.html\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"stk-button__inner-text\">Demo<\/span><\/a><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-b544af4\" id=\"requirements\" data-block-id=\"b544af4\"><h3 class=\"stk-block-heading__text\">Requirements:<\/h3><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To follow along with this tutorial, you will need a Google account and an API key for the Google Maps API. You can obtain an API key by following the instructions provided by <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\" target=\"_blank\" rel=\"noreferrer noopener\">Google<\/a> or please visit <a href=\"https:\/\/geopick.cityai.space\/index.php\/tutorials\/introductory\/\" target=\"_blank\" rel=\"noreferrer noopener\">beginner lesson<\/a> page.<\/li>\n\n\n\n<li>A code editor such as Visual Studio Code, Sublime Text, Notepad++ or your favorite code editor.<\/li>\n\n\n\n<li>A web browser such as Google Chrome or Mozilla Firefox<\/li>\n\n\n\n<li>Basic knowledge of HTML, CSS, and JavaScript<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-9ef6b76\" id=\"step-1-html-markup\" data-block-id=\"9ef6b76\"><h2 class=\"stk-block-heading__text\">Step 1: HTML Markup<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-619ef79\" data-block-id=\"619ef79\"><p class=\"stk-block-text__text\">We will start by creating an HTML file and adding the basic markup for our web application. In the head section, we will include a viewport meta tag and a title for the page. In the body section, we will create a div element with an id of &#8220;map&#8221; that will hold our map.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Google Maps API - Intermediate &lt;\/title&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0&quot;&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;style&gt;\n      #map {\n        height: 100%;\n      }\n      html, body {\n        height: 100%;\n        margin: 0;\n        padding: 0;\n      }\n      #title {\n        position: absolute;\n        top: 10px;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: rgba(255, 255, 255, 0.8);\n        padding: 10px;\n        font-size: 24px;\n        font-weight: bold;\n        border-radius: 10px;\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n      }\n      #legend {\n        position: absolute;\n        top: 120px;\n        right: 10px;\n        background-color: rgba(255, 255, 255, 0.8);\n        padding: 10px;\n        font-size: 16px;\n        border-radius: 10px;\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n      }\n      #print-button {\n        position: absolute;\n        top: 50%;\n        right: 10px;\n        background-color: rgba(255, 255, 255, 0.8);\n        border: 1px solid #ccc;\n        padding: 10px;\n        font-size: 12px;\n        line-height: 18px;\n        cursor: pointer;\n        z-index: 1;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;map&quot;&gt;&lt;\/div&gt;\n    &lt;div id=&quot;title&quot;&gt;Kyrgyzstan Earthquakes the Last Decade&lt;\/div&gt;\n    &lt;div id=&quot;legend&quot;&gt;\n      &lt;div&gt;&lt;span style=&quot;background-color:rgba(255, 0, 0, 0.8);&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude &gt;= 6.0&lt;\/div&gt;\n      &lt;div&gt;&lt;span style=&quot;background-color:rgba(255, 165, 0, 0.8);&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude &gt;= 5.0 and &lt; 6.0&lt;\/div&gt;\n      &lt;div&gt;&lt;span style=&quot;background-color:rgba(255, 255, 0, 0.8);&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude &gt;= 4.0 and &lt; 5.0&lt;\/div&gt;\n      &lt;div&gt;&lt;span style=&quot;background-color:rgba(0, 128, 0, 0.8);&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude &gt;= 2.5 and &lt; 4.0&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;script&gt;\n      \/\/ Your code will go here\n    &lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/markerclusterer.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&amp;callback=initMap&quot; async defer&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!<\/span><span style=\"color: #D8DEE9\">DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Google Maps API - Intermediate <\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">viewport<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">initial-scale=1.0<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">utf-8<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      #map <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      html, body <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">margin<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      #title <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">translateX<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">: 24<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">weight<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">bold<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">radius<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">shadow<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.3<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      #legend <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">: 120<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">right<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">: 16<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">radius<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">shadow<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.3<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      #print-button <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">right<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #D8DEE9FF\">: 1<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">solid<\/span><span style=\"color: #D8DEE9FF\"> #<\/span><span style=\"color: #D8DEE9\">ccc<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">: 12<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">line<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: 18<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">cursor<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">pointer<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">map<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">title<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Kyrgyzstan Earthquakes the Last Decade<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">legend<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;div&gt;&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color:rgba(255, 0, 0, 0.8);<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude &gt;= 6.0<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;div&gt;&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color:rgba(255, 165, 0, 0.8);<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude &gt;= 5.0 and &lt; 6.0<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;div&gt;&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color:rgba(255, 255, 0, 0.8);<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude &gt;= 4.0 and &lt; 5.0<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;div&gt;&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color:rgba(0, 128, 0, 0.8);<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude &gt;= 2.5 and &lt; 4.0<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      \/\/ Your code will go here<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/markerclusterer.js<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&amp;callback=initMap<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">async<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">defer<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-7ca5542\" data-block-id=\"7ca5542\"><p class=\"stk-block-text__text\">This is an HTML document that includes a Google Maps implementation. The document sets up the appearance of the map, including a title and legend, using CSS styling. The script section contains the code to initialize and display the map. It also includes a script to load the MarkerClusterer library for grouping markers together. Finally, it loads the Google Maps JavaScript API with an API key to enable access to the map functionality.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-b7a0abb\" id=\"step-2-initialize-the-map\" data-block-id=\"b7a0abb\"><h2 class=\"stk-block-heading__text\">Step 2: Initialize the Map<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-1c2cead\" data-block-id=\"1c2cead\"><p class=\"stk-block-text__text\">1.First, we declare a function called <code>initMap()<\/code>. This function will be called when the API script loads, and it will initialize the map.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-13d86d5\" data-block-id=\"13d86d5\"><p class=\"stk-block-text__text\">2.Inside the <code>initMap()<\/code> function, we create a new Google Maps object, passing it the ID of a <code>div<\/code> element in the HTML document where we want to display the map.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function initMap() {\n  var map = new google.maps.Map(document.getElementById('map'), {\n    zoom: 6,\n    center: {lat: 41.2044, lng: 74.7661}\n  });\n}\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">initMap<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">google<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">maps<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">Map<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">map<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">zoom<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">6<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">center<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #88C0D0\">lat<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">41.2044<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">lng<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">74.7661<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-25e5561\" data-block-id=\"25e5561\"><p class=\"stk-block-text__text\">Here, we set the zoom level of the map to 6 and the center point to the coordinates of a location. You can adjust these values according to your requirements.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-1e2d20a\" data-block-id=\"1e2d20a\"><p class=\"stk-block-text__text\">3.We create an empty array called <code>markers<\/code> and an empty array called <code>infowindows<\/code> to store the markers and info windows for each earthquake, respectively.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"var markers = [];\nvar infowindows = [];\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> []<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">infowindows<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> []<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-9fd7719\" id=\"step-3-using-marker-clusterer-and-usgs-api-to-display-earthquake-data-on-map\" data-block-id=\"9fd7719\"><h2 class=\"stk-block-heading__text\">Step 3: Using MarkerClusterer and USGS API to Display Earthquake Data on Map<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-f7ca9bb\" data-block-id=\"f7ca9bb\"><p class=\"stk-block-text__text\">1.The code then uses the <code>MarkerClusterer<\/code> library to cluster the markers on the map.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"var markerCluster = new MarkerClusterer(map, markers,\n  {imagePath: 'https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/m'});\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">markerCluster<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">MarkerClusterer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #88C0D0\">imagePath<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/m<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The <code>MarkerClusterer<\/code> takes three arguments: the map object, the array of markers to be clustered, and an options object. In this case, the options object specifies the path to the image files that will be used to create the cluster markers.<\/p>\n\n\n\n<p>2.Next, the code requests earthquake data from the USGS API using the <code>fetch()<\/code> function:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"var url = 'https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time';\nfetch(url)\n  .then(function(response) {\n    return response.json();\n  })\n  .then(function(data) {\n    \/\/ Code to add markers for each earthquake goes here\n  });\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">url<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">fetch<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">url<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">json<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">    <\/span><span style=\"color: #616E88\">\/\/ Code to add markers for each earthquake goes here<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The URL specifies the query parameters to retrieve earthquake data for a specific time period and geographic region. Once the data is retrieved, it is converted to a JavaScript object using the <code>json()<\/code> method and passed to a callback function to add markers to the map.<\/p>\n\n\n\n<p>3.The callback function loops through each earthquake in the data and creates a marker and infowindow for it. The marker is customized based on the magnitude of the earthquake:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"if (feature.properties.mag &gt;= 6.0) {\n  marker.setOptions({\n      icon: {\n      path: 'M 0,-10 10,0 0,10 -10,0 z',\n      fillColor: 'red',\n      fillOpacity: 0.8,\n      strokeColor: 'black',\n      strokeWeight: 1\n      }\n  });\n} else if (feature.properties.mag &gt;= 5.0) {\n  marker.setOptions({\n      icon: {\n      path: 'M 0,-10 10,0 0,10 -10,0 z',\n      fillColor: 'orange',\n      fillOpacity: 0.8,\n      strokeColor: 'black',\n      strokeWeight: 1\n      }\n  });\n} else if (feature.properties.mag &gt;= 4.0) {\n  marker.setOptions({\n      icon: {\n      path: 'M 0,-10 10,0 0,10 -10,0 z',\n      fillColor: 'yellow',\n      fillOpacity: 0.8,\n      strokeColor: 'black',\n      strokeWeight: 1\n      }\n  });\n} else {\n  marker.setOptions({\n      icon: {\n      path: 'M 0,-10 10,0 0,10 -10,0 z',\n      fillColor: 'green',\n      fillOpacity: 0.8,\n      strokeColor: 'black',\n      strokeWeight: 1\n      }\n  });\n}\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&gt;=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">6.0<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setOptions<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">path<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">M 0,-10 10,0 0,10 -10,0 z<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">fillColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">red<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">fillOpacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">strokeColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">black<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">strokeWeight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&gt;=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">5.0<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setOptions<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">path<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">M 0,-10 10,0 0,10 -10,0 z<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">fillColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">orange<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">fillOpacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">strokeColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">black<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">strokeWeight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&gt;=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">4.0<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setOptions<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">path<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">M 0,-10 10,0 0,10 -10,0 z<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">fillColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">yellow<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">fillOpacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">strokeColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">black<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">strokeWeight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setOptions<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">path<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">M 0,-10 10,0 0,10 -10,0 z<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">fillColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">green<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">fillOpacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">strokeColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">black<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">strokeWeight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The code sets the marker&#8217;s icon based on the earthquake&#8217;s magnitude, with larger magnitudes getting more intense colors.<\/p>\n\n\n\n<p>4.Finally, the code adds the marker and infowindow to the <code>markers<\/code> and <code>infowindows<\/code> arrays and adds the markers to the marker clusterer.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"            var infowindow = new google.maps.InfoWindow({\n              content: '&lt;strong&gt;Magnitude: ' + feature.properties.mag + '&lt;\/strong&gt;&lt;br&gt;' +\n                feature.properties.place\n            });\n\n            marker.addListener('click', function() {\n              infowindows.forEach(function(w) { w.close(); });\n              infowindow.open(map, marker);\n            });\n\n            markers.push(marker);\n            infowindows.push(infowindow);\n          });\n\n          \/\/ Add the markers to the clusterer\n          markerCluster.addMarkers(markers);\n        });\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">infowindow<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">google<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">maps<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">InfoWindow<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">              <\/span><span style=\"color: #88C0D0\">content<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;strong&gt;Magnitude: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;\/strong&gt;&lt;br&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">place<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">click<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">              <\/span><span style=\"color: #D8DEE9\">infowindows<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">forEach<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">w<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">w<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">close<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">              <\/span><span style=\"color: #D8DEE9\">infowindow<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">open<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">push<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">infowindows<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">push<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">infowindow<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          })<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">          <\/span><span style=\"color: #616E88\">\/\/ Add the markers to the clusterer<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">markerCluster<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addMarkers<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        })<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-6c871b5\" id=\"step-4-implementing-a-print-button-for-the-map-view\" data-block-id=\"6c871b5\"><h2 class=\"stk-block-heading__text\">Step 4: Implementing a Print Button for the Map View<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-0d85810\" data-block-id=\"0d85810\"><p class=\"stk-block-text__text\">After all the earthquake markers have been added to the map, the code creates a print button widget and adds it to the map. This button allows the user to print the current view of the map.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"        \/\/ Create a print widget for the map\n        google.maps.event.addListenerOnce(map, 'idle', function() {\n        var printButton = document.createElement('button');\n        printButton.textContent = 'Print Map';\n        printButton.id = 'print-button';\n        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(printButton);\n        printButton.addEventListener('click', function() {\n          window.print();\n        });\n      });\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Create a print widget for the map<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">google<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">maps<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">event<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addListenerOnce<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">idle<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">printButton<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">createElement<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">button<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">printButton<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">textContent<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Print Map<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">printButton<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">id<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">print-button<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">controls<\/span><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #D8DEE9\">google<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">maps<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">ControlPosition<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">TOP_RIGHT<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">push<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">printButton<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">printButton<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">click<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">window<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">print<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-82a94b6\" data-block-id=\"82a94b6\"><p class=\"stk-block-text__text\">The <code>google.maps.event.addListenerOnce()<\/code> function is used to add a one-time listener for the <code>idle<\/code> event of the map. This event is triggered when the map has finished rendering and is idle. Once the event is triggered, the print button is created and added to the map&#8217;s control panel in the top right corner. The button&#8217;s <code>click<\/code> event is then registered with the <code>addEventListener()<\/code> method. When the user clicks the button, the <code>window.print()<\/code> method is called, which prints the current view of the map. <\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-aa7b047\" id=\"step-5-final-step-save-html\" data-block-id=\"aa7b047\"><h2 class=\"stk-block-heading__text\">Step 5: Final step. Save HTML<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-dc26640\" data-block-id=\"dc26640\"><p class=\"stk-block-text__text\">Save the HTML file and open it in a web browser to view the map.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-aeeed6d\" data-block-id=\"aeeed6d\"><p class=\"stk-block-text__text\">Note: that the code also includes comments which explain what each section of code does. These comments are denoted by the <code>\/\/<\/code> symbol.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Google Maps API - Intermediate &lt;\/title&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0&quot;&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;style&gt;\n      #map {\n        height: 100%;\n      }\n      html, body {\n        height: 100%;\n        margin: 0;\n        padding: 0;\n      }\n      #title {\n        position: absolute;\n        top: 10px;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: rgba(255, 255, 255, 0.8);\n        padding: 10px;\n        font-size: 24px;\n        font-weight: bold;\n        border-radius: 10px;\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n      }\n      #legend {\n        position: absolute;\n        top: 120px;\n        right: 10px;\n        background-color: rgba(255, 255, 255, 0.8);\n        padding: 10px;\n        font-size: 16px;\n        border-radius: 10px;\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n      }\n      #print-button {\n        position: absolute;\n        top: 50%;\n        right: 10px;\n        background-color: rgba(255, 255, 255, 0.8);\n        border: 1px solid #ccc;\n        padding: 10px;\n        font-size: 12px;\n        line-height: 18px;\n        cursor: pointer;\n        z-index: 1;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;map&quot;&gt;&lt;\/div&gt;\n    &lt;div id=&quot;title&quot;&gt;Kyrgyzstan Earthquakes the Last Decade&lt;\/div&gt;\n    &lt;div id=&quot;legend&quot;&gt;\n      &lt;div&gt;&lt;span style=&quot;background-color:rgba(255, 0, 0, 0.8);&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude &gt;= 6.0&lt;\/div&gt;\n      &lt;div&gt;&lt;span style=&quot;background-color:rgba(255, 165, 0, 0.8);&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude &gt;= 5.0 and &lt; 6.0&lt;\/div&gt;\n      &lt;div&gt;&lt;span style=&quot;background-color:rgba(255, 255, 0, 0.8);&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude &gt;= 4.0 and &lt; 5.0&lt;\/div&gt;\n      &lt;div&gt;&lt;span style=&quot;background-color:rgba(0, 128, 0, 0.8);&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude &gt;= 2.5 and &lt; 4.0&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;script&gt;\n      function initMap() {\n        var map = new google.maps.Map(document.getElementById('map'), {\n          zoom: 6,\n          center: {lat: 41.2044, lng: 74.7661}\n        });\n\n        var markers = [];\n        var infowindows = [];\n\n        \/\/ Cluster the markers with marker clustering library\n        var markerCluster = new MarkerClusterer(map, markers,\n          {imagePath: 'https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/m'});\n        \n        \/\/ Request the earthquake data from USGS API and plot on the map\n        var url = 'https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time';\n        fetch(url)\n      .then(function(response) {\n        return response.json();\n      })\n      .then(function(data) {\n        \n        \/\/ Add markers for each earthquake\n        data.features.forEach(function(feature) {\n          var coords = feature.geometry.coordinates;\n          var latLng = new google.maps.LatLng(coords[1], coords[0]);\n          var marker = new google.maps.Marker({\n              position: latLng,\n              title: 'Magnitude: ' + feature.properties.mag\n            });\n\n        \/\/ Set the marker shape and color based on the magnitude\n        if (feature.properties.mag &gt;= 6.0) {\n        marker.setOptions({\n            icon: {\n            path: 'M 0,-10 10,0 0,10 -10,0 z',\n            fillColor: 'red',\n            fillOpacity: 0.8,\n            strokeColor: 'black',\n            strokeWeight: 1\n            }\n        });\n        } else if (feature.properties.mag &gt;= 5.0) {\n        marker.setOptions({\n            icon: {\n            path: 'M 0,-10 10,0 0,10 -10,0 z',\n            fillColor: 'orange',\n            fillOpacity: 0.8,\n            strokeColor: 'black',\n            strokeWeight: 1\n            }\n        });\n        } else if (feature.properties.mag &gt;= 4.0) {\n        marker.setOptions({\n            icon: {\n            path: 'M 0,-10 10,0 0,10 -10,0 z',\n            fillColor: 'yellow',\n            fillOpacity: 0.8,\n            strokeColor: 'black',\n            strokeWeight: 1\n            }\n        });\n        } else {\n        marker.setOptions({\n            icon: {\n            path: 'M 0,-10 10,0 0,10 -10,0 z',\n            fillColor: 'green',\n            fillOpacity: 0.8,\n            strokeColor: 'black',\n            strokeWeight: 1\n            }\n        });\n        }\n          var infowindow = new google.maps.InfoWindow({\n            content: '&lt;strong&gt;Magnitude: ' + feature.properties.mag + '&lt;\/strong&gt;&lt;br&gt;' +\n              feature.properties.place\n          });\n\n          marker.addListener('click', function() {\n            infowindows.forEach(function(w) { w.close(); });\n            infowindow.open(map, marker);\n          });\n\n          markers.push(marker);\n          infowindows.push(infowindow);\n          });\n\n          \/\/ Add the markers to the clusterer\n          markerCluster.addMarkers(markers);\n        });\n          \n        \/\/ Create a print widget for the map\n        google.maps.event.addListenerOnce(map, 'idle', function() {\n        var printButton = document.createElement('button');\n        printButton.textContent = 'Print Map';\n        printButton.id = 'print-button';\n        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(printButton);\n        printButton.addEventListener('click', function() {\n          window.print();\n        });\n      });\n    }\n  &lt;\/script&gt;\n  &lt;script src=&quot;https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/markerclusterer.js&quot;&gt;&lt;\/script&gt;\n  &lt;script async defer src=&quot;https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&amp;callback=initMap&quot;&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!<\/span><span style=\"color: #D8DEE9\">DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Google Maps API - Intermediate <\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">viewport<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">initial-scale=1.0<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">utf-8<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      #map <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      html, body <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">margin<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      #title <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">translateX<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">: 24<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">weight<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">bold<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">radius<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">shadow<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.3<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      #legend <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">: 120<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">right<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">: 16<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">radius<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">shadow<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.3<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      #print-button <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">right<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">255<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #D8DEE9FF\">: 1<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">solid<\/span><span style=\"color: #D8DEE9FF\"> #<\/span><span style=\"color: #D8DEE9\">ccc<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">: 12<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">line<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: 18<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">cursor<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">pointer<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">map<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">title<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Kyrgyzstan Earthquakes the Last Decade<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">legend<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;div&gt;&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color:rgba(255, 0, 0, 0.8);<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude &gt;= 6.0<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;div&gt;&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color:rgba(255, 165, 0, 0.8);<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude &gt;= 5.0 and &lt; 6.0<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;div&gt;&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color:rgba(255, 255, 0, 0.8);<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude &gt;= 4.0 and &lt; 5.0<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;div&gt;&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color:rgba(0, 128, 0, 0.8);<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude &gt;= 2.5 and &lt; 4.0<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      function initMap() <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">google<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">maps<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">Map<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">map<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #88C0D0\">zoom<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">6<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #88C0D0\">center<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #88C0D0\">lat<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">41.2044<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">lng<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">74.7661<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> [];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">infowindows<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> [];<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Cluster the markers with marker clustering library<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">markerCluster<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">MarkerClusterer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #88C0D0\">imagePath<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/m<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Request the earthquake data from USGS API and plot on the map<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">url<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">fetch<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">url<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">json<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Add markers for each earthquake<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">features<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">forEach<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">coords<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">geometry<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">coordinates<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">latLng<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">google<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">maps<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">LatLng<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">coords<\/span><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">coords<\/span><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">])<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">google<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">maps<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">Marker<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">              <\/span><span style=\"color: #88C0D0\">position<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">latLng<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">              <\/span><span style=\"color: #88C0D0\">title<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Magnitude: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Set the marker shape and color based on the magnitude<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&gt;=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">6.0<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setOptions<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">path<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">M 0,-10 10,0 0,10 -10,0 z<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">fillColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">red<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">fillOpacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">strokeColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">black<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">strokeWeight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&gt;=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">5.0<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setOptions<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">path<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">M 0,-10 10,0 0,10 -10,0 z<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">fillColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">orange<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">fillOpacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">strokeColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">black<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">strokeWeight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&gt;=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">4.0<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setOptions<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">path<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">M 0,-10 10,0 0,10 -10,0 z<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">fillColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">yellow<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">fillOpacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">strokeColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">black<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">strokeWeight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setOptions<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">path<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">M 0,-10 10,0 0,10 -10,0 z<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">fillColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">green<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">fillOpacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">strokeColor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">black<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">strokeWeight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">infowindow<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">google<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">maps<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">InfoWindow<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">content<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;strong&gt;Magnitude: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;\/strong&gt;&lt;br&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">              <\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">place<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">click<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">infowindows<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">forEach<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">w<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">w<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">close<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">infowindow<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">open<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">push<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">infowindows<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">push<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">infowindow<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">          <\/span><span style=\"color: #616E88\">\/\/ Add the markers to the clusterer<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">markerCluster<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addMarkers<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Create a print widget for the map<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">google<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">maps<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">event<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addListenerOnce<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">idle<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">printButton<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">createElement<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">button<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">printButton<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">textContent<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Print Map<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">printButton<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">id<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">print-button<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">controls<\/span><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #D8DEE9\">google<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">maps<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">ControlPosition<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">TOP_RIGHT<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">push<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">printButton<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">printButton<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">click<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">window<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">print<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/markerclusterer.js<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">async<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">defer<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&amp;callback=initMap<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-35f98c1\" data-block-id=\"35f98c1\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-130bd2d\" data-block-id=\"130bd2d\"><style>.stk-130bd2d .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/06\/Level_2_Google_Maps_API.html\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"stk-button__inner-text\">Demo<\/span><\/a><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-55d47fb\" id=\"conclusion\" data-block-id=\"55d47fb\"><h2 class=\"stk-block-heading__text\">Conclusion:<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-4ed3b68\" data-block-id=\"4ed3b68\"><p class=\"stk-block-text__text\">In this tutorial, we learned how to use the Google Maps JavaScript API to create an interactive map with custom markers and infowindows. We also explored the MarkerClusterer library to cluster markers and make the map more visually appealing. This tutorial provides a solid foundation for building more complex maps and adding additional functionality.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-1f44a61\" data-block-id=\"1f44a61\"><p class=\"stk-block-text__text\">Some of the key concepts covered in this lesson include:<\/p><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How to use the Google Maps API to create a map on a webpage.<\/li>\n\n\n\n<li>How to fetch data from an external API and display it on a map.<\/li>\n\n\n\n<li>How to add markers to a map and customize the marker icon based on data.<\/li>\n\n\n\n<li>How to cluster markers with the marker clustering library.<\/li>\n\n\n\n<li>How to add a legend and a print button to a map using HTML and CSS.<\/li>\n<\/ul>\n\n\n\n<p>To further explore and expand on the concepts covered in this lesson, learners can refer to the following resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\" type=\"1\" start=\"1\">\n<li>Google Maps JavaScript API documentation: <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/overview\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/overview<\/a><\/li>\n\n\n\n<li>Google Maps JavaScript API documentation work with data layer: <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/datalayer\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/datalayer<\/a><\/li>\n\n\n\n<li>Google Maps JavaScript API \u2013 Open Source Libraries: <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/libraries-open-source#web-map-service-wms\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/libraries-open-source#web-map-service-wms<\/a><\/li>\n\n\n\n<li>MarkerClusterer library documentation: <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/marker-clustering\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/marker-clustering<\/a><\/li>\n\n\n\n<li>USGS Earthquake Catalog: <a href=\"https:\/\/earthquake.usgs.gov\/earthquakes\/\">https:\/\/earthquake.usgs.gov\/earthquakes\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learning objectives: At the end of the lesson, learners should be able to: Table of Contents Learning objectives: Overview: Requirements:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1306,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-2112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/2112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/comments?post=2112"}],"version-history":[{"count":13,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/2112\/revisions"}],"predecessor-version":[{"id":2430,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/2112\/revisions\/2430"}],"up":[{"embeddable":true,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/1306"}],"wp:attachment":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/media?parent=2112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}