Hi,
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.
- 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.
- 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.
- 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>
<html>
<head>
<style>
/* 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 */
}
</style>
</head>
<body>
<h3>Locate Your Address on Map</h3>
<!--The div element for the map -->
<div id="beegle_map" onload="initMap()"></div>
<script>
// 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,
draggable:true,
title:"Drag me!",
map: map
});
google.maps.event.addListener(marker, 'dragend',
function (evt) {
document.getElementById('currentlat').innerHTML = evt.latLng.lat().toFixed(6);
document.getElementById('currentlong').innerHTML = evt.latLng.lng().toFixed(6);
}
);
//map.addEventListener("load", initMap);
}
</script>
<!--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
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCw8j-Azg8fsssds3Vy1VxBlP4K9-Uf8E&callback=initMap">
</script>
</body>
</html>
Screenshot of the errors:
