Gabotronix
3 months ago
162
0
General

Marker not appearing on my google map in Laravel-Vue

Posted 3 months ago by Gabotronix

Hi everybody, I'm using geolocationAPI to get my position and put a marker on the map, I get my position all right but the marker doesn't appear on the map, what would I be doing wrong? My code is pretty straightfordward and the initialLocation object is solething like this:

{ lat: 36.7202947, lng: -4.4064701 }

Which is a valid lat-lng object afaik.

My vue single component:

<template>
<div class="GOOGLEmap2_canvas" id="mapita"></div>
</template>
<!--SCRIPTS-->
<script>
export default {
name: 'GoogleMap5',


data() {
    return {
        map:null
        
    }
},


props:
{
    origin: { default: () => { return  { lat: 37.727312, lng: -4.424144 } } },
    zoom: { default:13, type:Number }
},


mounted()
{
    console.log(this.$options.name+' component successfully mounted');
    this.getInitialPosition()
},


methods: 
{


    getInitialPosition()
    {
        const self = this;
        var mapOptions = { zoom: this.zoom, center: this.origin };
        this.map = new google.maps.Map(document.getElementById('mapita'), mapOptions);

        navigator.geolocation.getCurrentPosition(function(position)
        {
            var initialLocation = { lat: position.coords.latitude, lng: position.coords.longitude };
            //var initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            self.map.setCenter(initialLocation);
            self.map.setZoom(self.zoom);

            var marker = new google.maps.Marker({ initialLocation, map: self.map }); 

        }, function(positionError)
        {
            console.log('user denied location prompt');
            self.setCenter(new google.maps.LatLng(self.origin.lat, self.origin.lng));
            self.map.setZoom(self.center);
        });
    }

    
}


};
</script>
<!--STYLES-->
<style scoped>
.GOOGLEmap2_canvas{width:100%; height:100%; background-color:rgb(235,235,235);}
</style>

Please sign in or create an account to participate in this conversation.