{"id":2228,"date":"2025-01-03T15:20:16","date_gmt":"2025-01-03T15:20:16","guid":{"rendered":"https:\/\/codingtutorials.in\/?p=2228"},"modified":"2025-04-05T10:31:06","modified_gmt":"2025-04-05T10:31:06","slug":"add-multiple-pin-on-google-maps-using-javascript-dynamically","status":"publish","type":"post","link":"https:\/\/codingtutorials.in\/add-multiple-pin-on-google-maps-using-javascript-dynamically\/","title":{"rendered":"How to show marker in google map using javascript?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2228\" class=\"elementor elementor-2228\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5443bcd e-flex e-con-boxed e-con e-parent\" data-id=\"5443bcd\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-64e9b1c elementor-widget elementor-widget-text-editor\" data-id=\"64e9b1c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/codingtutorials.in\/add-multiple-pin-on-google-maps-javascript-dynamically\/\"><strong>Add multiple pin on Google Maps<\/strong><\/a> (marker) is a powerful feature if you&#8217;re building a location-based application. This tutorial will explain how to use <strong>Google Maps using JavaScript<\/strong> with the API, including retrieving location data from the database.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bdfba77 elementor-widget elementor-widget-heading\" data-id=\"bdfba77\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Create database of Google Maps using JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5366802 elementor-widget elementor-widget-text-editor\" data-id=\"5366802\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Use MySQLI database to store location details like (name, latitude, longitude and state). The following PHP code will fetch these details dynamically:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fafd59f elementor-widget elementor-widget-code-highlight\" data-id=\"fafd59f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>$conn=mysqli_connect(\"localhost\",\"root\",\"\",\"location_db\");\nif(!$conn)\n{\n    die(\"Connection Failed\"). mysqli_connect_error()\n}\n\n$sql = \"SELECT id, name, latitude, longitude, state FROM googlemap WHERE name != ''\";\n\n$result = mysqli_query($conn, $sql);\n$franchiselocated = [];\nwhile ($row = mysqli_fetch_array($result)) {\n    $franchiselocated[] = [\n        'name' => $row['name'],\n        'latitude' => $row['latitude'],\n        'longitude' => $row['longitude'],\n        'state' => $row['state'] \n    ];\n}\n\nmysqli_close($conn);\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07b588c elementor-widget elementor-widget-heading\" data-id=\"07b588c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Database connection and data fetching in Google Maps using JavaScript<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfee184 elementor-widget elementor-widget-text-editor\" data-id=\"cfee184\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>The script connects to a MySQL database where database name is (<code>location_db<\/code>) and retrieves location data from the <code>googlemap<\/code> table.<\/li><li>Only records with non-blank names are included in the map display if blank is found, so it will show a warning message please select state.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2484321 elementor-widget elementor-widget-heading\" data-id=\"2484321\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Dynamic Google Maps Display<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88b2e04 elementor-widget elementor-widget-text-editor\" data-id=\"88b2e04\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>The <code>Google Maps using JavaScript with API<\/code> powers interactive maps embedded in web pages.<\/li><li>By default, the map is centered on India&#8217;s geographical coordinates (<code>lat: 20.5937<\/code>, <code>lng: 78.9629<\/code>) and uses a zoom level of 5.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6cfecea elementor-widget elementor-widget-heading\" data-id=\"6cfecea\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">State-Based Filtering<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a18a3e elementor-widget elementor-widget-text-editor\" data-id=\"6a18a3e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li>A dropdown menu allows users to select any specific state.<\/li>\n<li>Upon selection, the map dynamically filters and displays markers only for <a href=\"https:\/\/codingtutorials.in\/\"><strong>coding tutorial<\/strong><\/a> franchises located in the selected state.<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9a9f7e elementor-widget elementor-widget-heading\" data-id=\"e9a9f7e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Add Google map Script with Api<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4b4ec1 elementor-widget elementor-widget-text-editor\" data-id=\"a4b4ec1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Add the Google Maps API script to your HTML file:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96ca352 elementor-widget elementor-widget-code-highlight\" data-id=\"96ca352\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBpyqzwG0e43ddk8sNj6yxOz1bOzZsKYXY&libraries=places\"><\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3602699 elementor-widget elementor-widget-heading\" data-id=\"3602699\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Dynamically add markers to the map<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c23563 elementor-widget elementor-widget-text-editor\" data-id=\"4c23563\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here&#8217;s how to create a map and dynamically add multiple pins:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd05c22 elementor-widget elementor-widget-code-highlight\" data-id=\"fd05c22\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><?php\r\n    $conn = mysqli_connect(\"localhost\", \"root\", \"\", \"location_db\");\r\n    if (!$conn) {\r\n        die(\"Connection failed: \" . mysqli_connect_error());\r\n    }\r\n\r\n    $sql = \"SELECT id, name, latitude, longitude, state FROM googlemap WHERE name != ''\";\r\n    $result = mysqli_query($conn, $sql);\r\n    $franchiselocated = [];\r\n    while ($row = mysqli_fetch_array($result)) {\r\n        $franchiselocated[] = [\r\n            'name' => $row['name'],\r\n            'latitude' => $row['latitude'],\r\n            'longitude' => $row['longitude'],\r\n            'state' => $row['state'] \r\n        ];\r\n    }\r\n\r\n    $conn->close();\r\n?>\r\n\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Franchise Locations<\/title>\r\n    <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBpyqzwG0e43ddk8sNj6yxOz1bOzZsKYXY&libraries=places\"><\/script>\r\n    <style>\r\n        #map {\r\n            height: 500px;\r\n            width: 100%;\r\n        }\r\n        body{\r\n            background-color: yellowgreen;\r\n        }\r\n        select\r\n        {\r\n            width: 200px;\r\n            height: 45px;\r\n            border-radius: 2px;\r\n        }\r\n        h1{\r\n            color: white;   \r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <center>\r\n    <h1>Coding Tutorial Locations<\/h1>\r\n    \r\n    \r\n    <select onchange=\"Myfunction()\" id=\"selectstate\">\r\n        <option value=\"\">Select State<\/option>\r\n        <option value=\"Andhra Pradesh\">Andhra Pradesh<\/option>\r\n        <option value=\"Arunachal Pradesh\">Arunachal Pradesh<\/option>\r\n        <option value=\"Assam\">Assam<\/option>\r\n        <option value=\"Bihar\">Bihar<\/option>\r\n        <option value=\"Chhattisgarh\">Chhattisgarh<\/option>\r\n    <\/select>\r\n    <\/center>\r\n    <div id=\"map\"><\/div>\r\n\r\n    <script>\r\n        var map;\r\n        var markers = [];\r\n\r\n        function Myfunction() {\r\n            var selectstate = document.getElementById(\"selectstate\").value;\r\n            var mapset = {\r\n                center: { lat: 20.5937, lng: 78.9629 },\r\n                zoom: 5\r\n            };\r\n            map = new google.maps.Map(document.getElementById('map'), mapset);\r\n            markers.forEach(function(marker) {\r\n                marker.setMap(null);\r\n            });\r\n            var locations = <?php echo json_encode($franchiselocated); ?>;\r\n            var filteredLocations = locations.filter(function(location) {\r\n                return location.state === selectstate;\r\n            });\r\n            filteredLocations.forEach(function(location) {\r\n                var marker = new google.maps.Marker({\r\n                    position: { lat: parseFloat(location.latitude), lng: parseFloat(location.longitude) },\r\n                    map: map,\r\n                    title: location.name\r\n                });\r\n\r\n                var infoWindow = new google.maps.InfoWindow({\r\n                    content: location.name\r\n                });\r\n\r\n                marker.addListener('click', function() {\r\n                    infoWindow.open(map, marker);\r\n                });\r\n\r\n                markers.push(marker);\r\n            });\r\n            if (filteredLocations.length > 0) {\r\n                var bounds = new google.maps.LatLngBounds();\r\n                filteredLocations.forEach(function(location) {\r\n                    bounds.extend(new google.maps.LatLng(location.latitude, location.longitude));\r\n                });\r\n                map.fitBounds(bounds);\r\n            } else {\r\n                alert(\"No franchise locations found for the selected state.\");\r\n            }\r\n        }\r\n        google.maps.event.addDomListener(window, 'load', Myfunction);\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8173f99 elementor-widget elementor-widget-heading\" data-id=\"8173f99\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Features of this implementation<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a0a2cfd elementor-widget elementor-widget-text-editor\" data-id=\"a0a2cfd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Dynamically Data Fetching:<\/strong> Locations are fetch from the database and added dynamically.<\/li><li><strong>State-Based Filtering:<\/strong> Users can select a state from a selection box to a filter pin.<\/li><li><strong>Interactive Map:<\/strong> Clicking on a pin displays additional information about the location like location name.<\/li><li><strong>Responsive Zoom:<\/strong> Map automatically adjusts zoom based on visible pins.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c62eb83 elementor-widget elementor-widget-heading\" data-id=\"c62eb83\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Benefits of This Google Map pin Application<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c848930 elementor-widget elementor-widget-text-editor\" data-id=\"c848930\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Interactive User Experience: <\/strong>Users can visually locate franchise locations on a map.<\/li><li><strong>Dynamic Data Filtering:<\/strong> State-based data filtering allows users to quickly narrow down locations of interest.<\/li><li><strong>Easy expandability:<\/strong> Developers can easily add more features, such as searching by city and additional filtering criteria.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0ff198 elementor-widget elementor-widget-text-editor\" data-id=\"f0ff198\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>The <code>Google Maps JavaScript API<\/code> powers interactive maps embedded in web pages.<\/li><li>By default, the map is centered on India&#8217;s geographical coordinates (<code>lat: 20.5937<\/code>, <code>lng: 78.9629<\/code>) and uses a zoom level of 5.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bfca915 e-flex e-con-boxed e-con e-parent\" data-id=\"bfca915\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e0c0fe0 elementor-widget elementor-widget-shortcode\" data-id=\"e0c0fe0\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode2271-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 20% !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode2271-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode2271-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode2271-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">Google map multi pin locator Source code<\/h2>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">FREE DOWNLOAD<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"Google-map-multi-pin-locator-code.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send link\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Add multiple pin on Google Maps (marker) is a powerful feature if you&#8217;re building a location-based application. This<\/p>\n","protected":false},"author":1,"featured_media":2230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,32],"tags":[],"class_list":["post-2228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-php"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add multiple pin on Google Maps using JavaScript dynamically<\/title>\n<meta name=\"description\" content=\"Learn how to dynamically add multiple pin Google Maps using JavaScript. Here you will get better understanding step by step.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"add multiple pin on Google Maps JavaScript dynamically\" \/>\n<meta property=\"og:description\" content=\"Learn how to dynamically add multiple pin Google Maps using JavaScript. Here you will get better understanding step by step.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-03T15:20:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-05T10:31:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/google-map_11zon.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1171\" \/>\n\t<meta property=\"og:image:height\" content=\"651\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"add multiple pin on Google Maps JavaScript dynamically\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to dynamically add multiple pin Google Maps using JavaScript. Here you will get better understanding step by step.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/google-map_11zon.webp\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add multiple pin on Google Maps using JavaScript dynamically","description":"Learn how to dynamically add multiple pin Google Maps using JavaScript. Here you will get better understanding step by step.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/","og_locale":"en_US","og_type":"article","og_title":"add multiple pin on Google Maps JavaScript dynamically","og_description":"Learn how to dynamically add multiple pin Google Maps using JavaScript. Here you will get better understanding step by step.","og_url":"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2025-01-03T15:20:16+00:00","article_modified_time":"2025-04-05T10:31:06+00:00","og_image":[{"width":1171,"height":651,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/google-map_11zon.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_title":"add multiple pin on Google Maps JavaScript dynamically","twitter_description":"Learn how to dynamically add multiple pin Google Maps using JavaScript. Here you will get better understanding step by step.","twitter_image":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/google-map_11zon.webp","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/add-multiple-pin-on-google-maps-using-javascript-dynamically\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"How to show marker in google map using javascript?","datePublished":"2025-01-03T15:20:16+00:00","dateModified":"2025-04-05T10:31:06+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/add-multiple-pin-on-google-maps-using-javascript-dynamically\/"},"wordCount":360,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/google-map_11zon.webp","articleSection":["Javascript","php"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/add-multiple-pin-on-google-maps-using-javascript-dynamically\/","url":"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/","name":"Add multiple pin on Google Maps using JavaScript dynamically","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/google-map_11zon.webp","datePublished":"2025-01-03T15:20:16+00:00","dateModified":"2025-04-05T10:31:06+00:00","description":"Learn how to dynamically add multiple pin Google Maps using JavaScript. Here you will get better understanding step by step.","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/google-map_11zon.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/google-map_11zon.webp","width":1171,"height":651,"caption":"google map in javascript"},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/how-to-add-multiple-pin-on-google-maps-javascript-dynamically\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"Add multiple pin on Google Maps JavaScript dynamically"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/2228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=2228"}],"version-history":[{"count":45,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/2228\/revisions"}],"predecessor-version":[{"id":2901,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/2228\/revisions\/2901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/2230"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=2228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=2228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=2228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}