0
I’m trying to make a simple plugin that show via shortcode a small google maps map with the current location of the user, but when I put the shortcode the map does not appear, follows the code:
function GetMyLocation(){
?>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDn4VzI0_FK0rrbg0QHcLH0l-_n4eFoHnk&callback=initMap">
</script>
some error appears on the console? posts the shortcode code and how you are inserting it into the content as well.
– Ricardo Moraleida
No error appears in the console unfortunately, when I will inspect the element a div id="map" receives style="position: relative; overflow: Hidden;" alone. I’m inserting the shortcode [Location] within a post @Ricardo
– Matheus Barem
After closing the script still has
<?php
}
 add_shortcode('location', 'GetMyLocation');
 ?>
– Matheus Barem