{"id":216,"date":"2025-12-15T11:22:35","date_gmt":"2025-12-15T08:22:35","guid":{"rendered":"https:\/\/mapsfun.com\/?p=216"},"modified":"2025-12-15T11:22:36","modified_gmt":"2025-12-15T08:22:36","slug":"how-to-embed-google-maps-in-drupal","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=216","title":{"rendered":"How to Embed Google Maps in Drupal"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Add Google Maps with Multiple Locations to Your Drupal Website<\/h2>\n\n\n\n<p>Integrating Google Maps into Drupal for displaying multiple locations is a common requirement for businesses, event sites, and organizations. While Drupal offers robust mapping solutions, the setup process involves multiple modules, API configurations, and technical steps. This guide walks you through the complete process and introduces a simpler alternative.<\/p>\n\n\n\n<p><strong>Understanding Drupal&#8217;s Mapping Ecosystem<\/strong><\/p>\n\n\n\n<p>Drupal has two main mapping approaches:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Geofield + Geolocation modules<\/strong> (Modern, recommended for Drupal 9\/10)<\/li>\n\n\n\n<li><strong>2. Google Maps Field module <\/strong>(Simpler but less flexible)<\/li>\n\n\n\n<li><strong>3. Custom integration<\/strong> (Full control but complex)<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: Using Geofield &amp; Geolocation Modules (Drupal 9\/10)<\/strong><\/p>\n\n\n\n<p>This is the most powerful but complex method, recommended for serious mapping needs<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Install Required Modules<\/p>\n\n\n\n<p><strong>bash<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># Using Composer (recommended)<\/span>\ncomposer <span class=\"hljs-keyword\">require<\/span> drupal\/geofield\ncomposer <span class=\"hljs-keyword\">require<\/span> drupal\/geolocation\ncomposer <span class=\"hljs-keyword\">require<\/span> drupal\/geolocation_googlemaps\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Or via Drupal UI:<\/p>\n\n\n\n<p>Admin \u2192 Extend \u2192 Install new module<\/p>\n\n\n\n<p><strong>Required modules:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&#8211; Geofield<\/strong> (Stores geographic data)<\/li>\n\n\n\n<li><strong>&#8211; Geolocation<\/strong> (Provides mapping capabilities)<\/li>\n\n\n\n<li><strong>&#8211; Geolocation Google Maps<\/strong> (Google Maps integration)<\/li>\n\n\n\n<li><strong>&#8211; Address<\/strong> (Optional, for address management)<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Configure Google Maps API Key<\/p>\n\n\n\n<p><strong>Critical:<\/strong> You must have a Google Cloud account with billing enabled.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Create API Key:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u00a0\u00a0<strong>javascript<\/strong><br><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\"> <span class=\"hljs-comment\">\/\/ Google Cloud Console \u2192 APIs &amp; Services \u2192 Credentials<\/span>\n   <span class=\"hljs-comment\">\/\/ Create API Key and restrict it to:<\/span>\n   <span class=\"hljs-comment\">\/\/ - Maps JavaScript API<\/span>\n   <span class=\"hljs-comment\">\/\/ - Geocoding API<\/span>\n   <span class=\"hljs-comment\">\/\/ - Places API (if using search)<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>2. Configure in Drupal:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u00a0\u00a0\u00a0&#8211; Go to `\/admin\/config\/system\/geolocation`<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Enter your Google Maps API key<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Set map default settings:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Create Location Content Type<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Create new content type: `\/admin\/structure\/types\/add`<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u00a0\u00a0\u00a0&#8211; Name: &#8220;Location&#8221; or &#8220;Branch&#8221;<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Add fields as described below<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>2. Add Address field:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u00a0\u00a0\u00a0&#8211; Field type: Address<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Storage: Default<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>3. Add Geofield for coordinates:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u00a0<strong>yaml<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u00a0Field type: <\/strong>Geofield<\/li>\n\n\n\n<li><strong>\u00a0\u00a0Widget:<\/strong> Geolocation Google Maps API<\/li>\n\n\n\n<li>\u00a0<strong>\u00a0Storage: <\/strong>Backend Default<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>4. Configure Geofield widget:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u00a0<strong>php<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>In field configuration:<\/li>\n\n\n\n<li><strong>Google Maps API Key: [Your key]<\/strong><\/li>\n\n\n\n<li><strong>Default zoom: 12<\/strong><\/li>\n\n\n\n<li><strong>Enable marker dragging: Yes<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 4: Create Map Display for Multiple Locations<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Create a View: <\/strong>\n<ul class=\"wp-block-list\">\n<li>`\/admin\/structure\/views\/add`<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>2. Configure View:<\/strong><\/li>\n\n\n\n<li>\u00a0<strong>yaml<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>\u00a0Show: Content of type Location<\/strong><\/li>\n\n\n\n<li>\u00a0<strong>Format: Geolocation Google Map<\/strong><\/li>\n\n\n\n<li>\u00a0<strong>Fields: Title, Address, Geofield<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>3. Map format settings:<\/strong><\/li>\n\n\n\n<li>\u00a0\u00a0<strong>php<\/strong><\/li>\n\n\n\n<li>\u00a0\u00a0<strong>In View format settings:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u00a0\u00a0\u00a0Google Maps API Key: [Your key]<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0Map Type: Roadmap<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0Height: 500px<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0Enable Clustering: Yes (for many locations)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>4. Add exposed filter for categories (optional):<\/strong><\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0<strong>twig<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u00a0<strong>\u00a0\u00a0{# Allows filtering locations by type #}<\/strong><\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0Filter criteria: Location Type<\/strong><\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0Expose filter to visitors: Yes<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 5: Embed the Map in a Page<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Create a Block display<\/strong> in your View<\/li>\n\n\n\n<li><strong>2. Place block in region:<\/strong><\/li>\n\n\n\n<li><strong>\u00a0php<\/strong>\n<ul class=\"wp-block-list\">\n<li>Admin \u2192 Structure \u2192 Block layout<\/li>\n\n\n\n<li>Add &#8220;Locations Map&#8221; block to content region<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>3. Or embed via PHP in node template:<\/strong><\/li>\n\n\n\n<li>\u00a0<strong>twig<\/strong><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">   {<span class=\"hljs-comment\"># In your node template #}<\/span>\n   {{ drupal_view(<span class=\"hljs-string\">'locations_map'<\/span>, <span class=\"hljs-string\">'block_1'<\/span>) }}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\"><strong>Method 2: Google Maps Field Module (Simpler Alternative)<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-left\">For basic mapping needs, this module is easier to set up.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><br>Step 1: Install Module<\/p>\n\n\n\n<p><strong>bash<\/strong><\/p>\n\n\n\n<p>composer require drupal\/google_map_field<br><\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Add Google Map Field to Content Type<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Edit content type:<\/strong> `\/admin\/structure\/types\/manage\/[your_type]\/fields`<\/li>\n\n\n\n<li><strong>2. Add field: <\/strong>Field type \u2192 Google Map<\/li>\n\n\n\n<li><strong>3. Configure field settings:<\/strong><\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0<strong>yaml<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>\u00a0\u00a0\u00a0API Key:<\/strong> [Your Google Maps API Key]<\/li>\n\n\n\n<li>\u00a0\u00a0<strong>\u00a0Default Zoom:<\/strong> 10<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0Map Type:<\/strong> Roadmap<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0Enable Marker:<\/strong> Yes<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Display Multiple Locations<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.Create a View with Google Map formatter<\/strong><\/li>\n\n\n\n<li><strong>2. Add multiple location fields:<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>twig<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"> {% <span class=\"hljs-keyword\">for<\/span> location in locations %}\n     {{ google_map_field_render(location) }}\n   {% <span class=\"hljs-keyword\">endfor<\/span> %}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>3. Customize with CSS:<\/strong><br><\/li>\n<\/ul>\n\n\n\n<p><strong>css<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* In your theme's CSS file *\/<\/span>\n   <span class=\"hljs-selector-class\">.google-map-field-container<\/span> {\n     <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n     <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n     <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">0<\/span>;\n   }\n   \n   <span class=\"hljs-selector-class\">.gm-style<\/span> <span class=\"hljs-selector-tag\">img<\/span> {\n     <span class=\"hljs-attribute\">max-width<\/span>: none <span class=\"hljs-meta\">!important<\/span>; <span class=\"hljs-comment\">\/* Fix Drupal image constraints *\/<\/span>\n   }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\"><strong>Method 3: Custom Integration with Twig &amp; JavaScript<\/strong><\/p>\n\n\n\n<p>For complete control without module dependencies.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Create Location Data Structure<\/p>\n\n\n\n<p>In your custom module or theme:<\/p>\n\n\n\n<p><strong>php<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\">\/\/ mymodule\/src\/Plugin\/Block\/LocationsMapBlock.php<\/span>\n<span class=\"hljs-keyword\">namespace<\/span> <span class=\"hljs-title\">Drupal<\/span>\\<span class=\"hljs-title\">mymodule<\/span>\\<span class=\"hljs-title\">Plugin<\/span>\\<span class=\"hljs-title\">Block<\/span>;\n\n<span class=\"hljs-keyword\">use<\/span> <span class=\"hljs-title\">Drupal<\/span>\\<span class=\"hljs-title\">Core<\/span>\\<span class=\"hljs-title\">Block<\/span>\\<span class=\"hljs-title\">BlockBase<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">LocationsMapBlock<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">BlockBase<\/span> <\/span>{\n  <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">build<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n    $locations = &#91;\n      &#91;\n        <span class=\"hljs-string\">'lat'<\/span> =&gt; <span class=\"hljs-number\">40.7128<\/span>,\n        <span class=\"hljs-string\">'lng'<\/span> =&gt; <span class=\"hljs-number\">-74.0060<\/span>,\n        <span class=\"hljs-string\">'title'<\/span> =&gt; <span class=\"hljs-string\">'New York Office'<\/span>,\n        <span class=\"hljs-string\">'description'<\/span> =&gt; <span class=\"hljs-string\">'Our headquarters'<\/span>,\n      ],\n      <span class=\"hljs-comment\">\/\/ Add more locations...<\/span>\n    ];\n    \n    <span class=\"hljs-keyword\">return<\/span> &#91;\n      <span class=\"hljs-string\">'#theme'<\/span> =&gt; <span class=\"hljs-string\">'locations_map'<\/span>,\n      <span class=\"hljs-string\">'#locations'<\/span> =&gt; $locations,\n      <span class=\"hljs-string\">'#attached'<\/span> =&gt; &#91;\n        <span class=\"hljs-string\">'library'<\/span> =&gt; &#91;<span class=\"hljs-string\">'mymodule\/google_maps'<\/span>],\n        <span class=\"hljs-string\">'drupalSettings'<\/span> =&gt; &#91;\n          <span class=\"hljs-string\">'googleMapsApiKey'<\/span> =&gt; <span class=\"hljs-string\">'YOUR_API_KEY'<\/span>,\n          <span class=\"hljs-string\">'locations'<\/span> =&gt; $locations,\n        ],\n      ],\n    ];\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\">Step 2: Create Twig Template<\/p>\n\n\n\n<p><strong>twig<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">{# templates\/locations-map.html.twig #}\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"drupal-google-map\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"custom-map-container\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-comment\">\/\/ API key from drupalSettings<\/span>\n<span class=\"hljs-keyword\">const<\/span> apiKey = drupalSettings.googleMapsApiKey;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> locations = drupalSettings.locations;\n  <span class=\"hljs-keyword\">const<\/span> map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'drupal-google-map'<\/span>), {\n    <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">10<\/span>,\n    <span class=\"hljs-attr\">center<\/span>: {<span class=\"hljs-attr\">lat<\/span>: locations&#91;<span class=\"hljs-number\">0<\/span>].lat, <span class=\"hljs-attr\">lng<\/span>: locations&#91;<span class=\"hljs-number\">0<\/span>].lng},\n  });\n  \n  locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n      <span class=\"hljs-attr\">position<\/span>: {<span class=\"hljs-attr\">lat<\/span>: location.lat, <span class=\"hljs-attr\">lng<\/span>: location.lng},\n      <span class=\"hljs-attr\">map<\/span>: map,\n      <span class=\"hljs-attr\">title<\/span>: location.title,\n    });\n  });\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\">Step 3: Define Library<\/p>\n\n\n\n<p><strong>yaml<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># mymodule.libraries.yml<\/span>\ngoogle_maps:\n  version: <span class=\"hljs-number\">1.0<\/span>\n  js:\n    https:<span class=\"hljs-comment\">\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&amp;callback=initMap:<\/span>\n      type: external\n      async: <span class=\"hljs-keyword\">true<\/span>\n      defer: <span class=\"hljs-keyword\">true<\/span>\n  dependencies:\n    - core\/drupalSettings\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\"><strong>Common Drupal Mapping Problems &amp; Solutions<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u274c <strong>Problem 1: <\/strong>&#8220;This page didn&#8217;t load Google Maps correctly&#8221;<\/li>\n\n\n\n<li><em>Solution: <\/em>Check API key restrictions and ensure billing is enabled on Google Cloud.<\/li>\n\n\n\n<li><strong>\u274c Problem 2: <\/strong>Map Doesn&#8217;t Appear in View<\/li>\n\n\n\n<li><em>Solution:<\/em> Clear Drupal cache and check field formatters:<\/li>\n\n\n\n<li><strong>bash<\/strong>\n<ul class=\"wp-block-list\">\n<li>drush cr\u00a0 # Clear cache<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u274c Problem 3: <\/strong>Performance Issues with Many Markers<\/li>\n\n\n\n<li><em>Solution:<\/em> Enable marker clustering in Geolocation module:<\/li>\n\n\n\n<li><strong>php<\/strong>\n<ul class=\"wp-block-list\">\n<li>In View format settings<\/li>\n\n\n\n<li>Clustering: Enabled<\/li>\n\n\n\n<li>Cluster minimum size: 5<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u274c Problem 4:<\/strong> Address Not Geocoding<\/li>\n\n\n\n<li><em>Solution<\/em>: Ensure Geocoding API is enabled in Google Cloud and quota is not exceeded.<\/li>\n\n\n\n<li><strong>\u274c Problem 5:<\/strong> Mobile Responsiveness Issues<\/li>\n\n\n\n<li><em>Solution:<\/em> Add CSS to your theme:<\/li>\n<\/ul>\n\n\n\n<p><strong>css<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* Ensure map containers are responsive *\/<\/span>\n<span class=\"hljs-selector-class\">.geolocation-map-container<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-meta\">!important<\/span>;\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-meta\">!important<\/span>;\n}\n\n<span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">768px<\/span>) {\n  <span class=\"hljs-selector-class\">.geolocation-map-widget<\/span>,\n  <span class=\"hljs-selector-class\">.google-map-field<\/span> {\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">300px<\/span> <span class=\"hljs-meta\">!important<\/span>;\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Performance Optimization for Drupal Maps<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Lazy Load Maps:<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>javascript<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Add to your theme JS<\/span>\n<span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-string\">'IntersectionObserver'<\/span> <span class=\"hljs-keyword\">in<\/span> <span class=\"hljs-built_in\">window<\/span>) {\n  <span class=\"hljs-keyword\">const<\/span> mapObserver = <span class=\"hljs-keyword\">new<\/span> IntersectionObserver(<span class=\"hljs-function\">(<span class=\"hljs-params\">entries<\/span>) =&gt;<\/span> {\n    entries.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">entry<\/span> =&gt;<\/span> {\n      <span class=\"hljs-keyword\">if<\/span> (entry.isIntersecting) {\n        loadGoogleMaps();\n        mapObserver.unobserve(entry.target);\n      }\n    });\n  });\n  mapObserver.observe(<span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'.map-container'<\/span>));\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>2. Use Drupal Caching:<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>php<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\">\/\/ In your block plugin<\/span>\n<span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getCacheMaxAge<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-number\">3600<\/span>; <span class=\"hljs-comment\">\/\/ Cache for 1 hour<\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>3. Optimize Marker Data:<\/strong> Use lightweight JSON instead of full entity loads.<br><\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Complexity of Drupal Mapping Solutions<\/strong><\/p>\n\n\n\n<p>Consider what you&#8217;re managing with traditional Drupal approaches:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Module Management:<\/strong> 4+ interdependent modules<\/li>\n\n\n\n<li><strong>2. API Configuration:<\/strong> Google Cloud console management<\/li>\n\n\n\n<li><strong>3. Content Architecture: <\/strong>Complex field structures<\/li>\n\n\n\n<li><strong>4. View Configuration:<\/strong> Multiple displays and formatters<\/li>\n\n\n\n<li><strong>5. Performance Tuning:<\/strong> Caching and optimization<\/li>\n\n\n\n<li><strong>6. Security Maintenance:<\/strong> API key security and updates<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"567\" height=\"377\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-44.png\" alt=\"\" class=\"wp-image-217\" style=\"width:542px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-44.png 567w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-44-300x199.png 300w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Simplified Alternative: MapsFun.com for Drupal<\/strong><\/p>\n\n\n\n<p>What if you could bypass all this complexity and get a beautiful, functional map in minutes? <strong>MapsFun.com<\/strong> eliminates every technical hurdle mentioned above.<\/p>\n\n\n<p><iframe src=\"https:\/\/panel.mapsfun.com\/embed-map?code=668ecbcced7931f89205d1e881bb82aa&#038;lang=uk&#038;tpl=photo\" width=\"100%\" height=\"600\" style=\"border:0\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>How MapsFun.com Integrates with Drupal:<\/strong><\/p>\n\n\n\n<p><strong>1. No Module Installation: <\/strong>Simple embed code works immediately<\/p>\n\n\n\n<p><strong>2. No API Key Management:<\/strong> We handle Google Maps integration<\/p>\n\n\n\n<p><strong>3. Visual Editor:<\/strong> Create maps without configuring fields or views<\/p>\n\n\n\n<p><strong>5-Minute Drupal Integration:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Step 1:<\/strong> Create your map at [MapsFun.com](https:\/\/mapsfun.com)\n<ul class=\"wp-block-list\">\n<li>&#8211; Add locations via search or CSV upload<\/li>\n\n\n\n<li>&#8211; Customize design to match your Drupal theme<\/li>\n\n\n\n<li>&#8211; Configure interactive features<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Step 2:<\/strong> Copy your embed code from MapsFun<\/li>\n\n\n\n<li><strong>Step 3:<\/strong> In Drupal:\n<ul class=\"wp-block-list\">\n<li>1. Create <strong>Custom Block <\/strong>(`<strong>\/admin\/structure\/block\/block-content\/add<\/strong>`)<\/li>\n\n\n\n<li>2. Choose <strong>Basic<\/strong> type<\/li>\n\n\n\n<li>3. Paste MapsFun code in Body field<\/li>\n\n\n\n<li>4. Place block in any region<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-comment\">&lt;!-- MapsFun Drupal Embed Example --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"mapsfun-embed\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/app.mapsfun.com\/embed\/map\/YOUR_UNIQUE_ID\"<\/span> \n          <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"border: none; width: 100%; height: 500px;\"<\/span>\n          <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Our Locations\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>For Programmatic Integration (Advanced):<\/strong><\/p>\n\n\n\n<p><strong>php<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"> In your Drupal theme template\n$markup = <span class=\"hljs-string\">'&lt;div class=\"mapsfun-container\"&gt;'<\/span>;\n$markup .= <span class=\"hljs-string\">'&lt;iframe src=\"https:\/\/app.mapsfun.com\/embed\/map\/YOUR_ID\" '<\/span>;\n$markup .= <span class=\"hljs-string\">'style=\"width:100%;height:500px;border:none;\"&gt;&lt;\/iframe&gt;'<\/span>;\n$markup .= <span class=\"hljs-string\">'&lt;\/div&gt;'<\/span>;\n\n<span class=\"hljs-keyword\">return<\/span> &#91;\n  <span class=\"hljs-string\">'#type'<\/span> =&gt; <span class=\"hljs-string\">'markup'<\/span>,\n  <span class=\"hljs-string\">'#markup'<\/span> =&gt; $markup,\n];<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Why Drupal Developers Choose MapsFun.com<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u2705 Bypass Module Complexity <\/strong>&#8211; No Geofield\/Geolocation configuration\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Eliminate API Key Headaches<\/strong> &#8211; No Google Cloud management\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Rapid Deployment<\/strong> &#8211; Maps in minutes, not hours\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 <strong>Better Performance<\/strong> &#8211; Optimized loading out of the box\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 <strong>Easy Maintenance <\/strong>&#8211; Update maps without touching Drupal\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Cost Predictable<\/strong> &#8211; No surprise Google API bills\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Professional Features <\/strong>&#8211; Clustering, custom markers, directions\u00a0\u00a0<\/li>\n<\/ul>\n\n\n\n<p>Feature Comparison: Drupal Mapping Solutions<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"869\" height=\"424\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-45.png\" alt=\"\" class=\"wp-image-218\" style=\"width:690px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-45.png 869w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-45-300x146.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-45-768x375.png 768w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>Conclusion: Streamline Your Drupal Mapping Strategy<\/strong><\/p>\n\n\n\n<p>While Drupal offers powerful mapping capabilities through modules like Geofield and Geolocation, the implementation requires significant technical expertise\u2014from module configuration and API management to complex view setups and performance optimization. For many Drupal site owners, this overhead outweighs the benefits.<\/p>\n\n\n\n<p>For Drupal administrators and developers who want professional mapping results without the technical complexity,<a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> provides an elegant solution. Instead of wrestling with module dependencies, field configurations, and API quotas, you can create stunning, interactive maps through an intuitive interface and embed them in Drupal with simple copy-paste.<\/p>\n\n\n\n<p><strong>Stop spending hours on map configuration and start delivering value to your visitors. <\/strong>Whether you need to display store locations, event venues, or service areas, <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> delivers enterprise-quality mapping without the enterprise-level complexity. Visit <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> to create your first map in minutes\u2014no modules, no API keys, and no complex Drupal configuration required.<br><\/p>\n","protected":false},"excerpt":{"rendered":"How to Add Google Maps with Multiple Locations to Your Drupal Website Integrating Google Maps into Drupal for displaying multiple locations is a common requirement for businesses, event sites, and organizations. While Drupal offers robust mapping solutions, the setup process involves multiple modules, API configurations, and technical steps. This guide walks you through the complete [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,1],"tags":[],"class_list":["post-216","post","type-post","status-publish","format-standard","hentry","category-drupal-google-map","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=216"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":219,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/216\/revisions\/219"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}