How to include custom behaviour Google Maps


I am trying to load a Google Maps in my application where user can set the marker to some place and I use that as their location.

Default Map that is there in Bubble doesn’t allow this functionality, so I tried “Google Maps Extended”. But I couldn’t understand it, so I decided to implement it myself.

With my limited understanding, I created an HTML object and added code snippets from following pages and did some tweaks.

However, I am facing couple of issues.

  1. I am getting the error saying “You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.” and it is indeed not working.
  2. Also, I have put a search box with choice styles as “Geographic places” in the same pop-up. It is not working probably because of two times invocation of JS API.
  3. And when I show the pop-up, I try to set the location of map as a dynamic position, but even that is not working. I have tried “Current geographic address” and also by setting “Current geographic address” as a custom state.

Any guidance would be much appreciated.

Here’s the content of my HTML element.

<!DOCTYPE html>
       /* Set the size of the div element that contains the map */
      #beegle_map {
        height: 500px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
    <h3>Locate Your Address on Map</h3>
    <!--The div element for the map -->
    <div id="beegle_map" onload="initMap()"></div>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var lati = Current geographic position's latitude;
var longi = Current geographic position's longitude;

  var uluru = {lat: lati , lng: longi};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('beegle_map'), {zoom: 18, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({
      position: uluru, 
      title:"Drag me!",
      map: map
  google.maps.event.addListener(marker, 'dragend', 
    function (evt) {
    	document.getElementById('currentlat').innerHTML =;
        document.getElementById('currentlong').innerHTML = evt.latLng.lng().toFixed(6);
    //map.addEventListener("load", initMap);
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
      <script async defer


Screenshot of the errors:


Hi mghatiya,

Running into the same issue. Did you ever find a solution?


No Chris. Couldn’t find a good solution around it. I used Gaurav’s Maps plugin with limited success but ran into some issues in that too. But you can try that one. At least it did work to some extent.

As of now we don’t have the maps use-case so I have stopped investing into this one.