Develop Reference

The map does not work at the beginning of going to the page, but works if it works refresh page in vuejs

The map does not work at the beginning of going to the page, but works if it works refresh page in Vue.js.
Is there any help in this matter?
this code
mounted() {
this.geolocate();
},
methods: {
async geolocate() {
this.getFloatDirections();
this.center = {
lat: this.lat,
lng: this.lng
};
this.coordinates = {
full_name: this.$route.query.name,
lat: this.lat,
lng: this.lng
};
// console.log("typeof(this.center.lat)"+typeof(this.$route.params.lat))
},
getFloatDirections(){
this.lat = parseFloat(this.$route.params.lat);
this.lng = parseFloat(this.$route.params.lng);
},
getPosition: function(marker) {
return {
lat: marker.lat,
lng: marker.lng
};
},
toggleInfo: function(marker) {
this.infoPosition = this.getPosition(marker);
this.infoContent = marker.full_name;
this.infoOpened = true;
}
}
this image before refresh
this image after refresh

Replace mounted() by created()
mounted() is called after DOM has been mounted so you can access the reactive component, templates, and DOM elements and manipulate them.
If you need to know more about vue Lifecycle Hooks.

VueJs only show google map when location is set

So I'm trying to build a simple app that shows distance to locations on a Google map, from a user's current location.
I'm using Vue.js 1.0 and the vue-google-maps plugin.
I'm trying to center the Google map on user's location, but can only get the map to load if I hard code the longitude and latitude data in my application like this:
export default {
data: function data() {
return {
center:{ lat:28.2328382, lng: -3.298973987232 },
mapBounds: {},
usermarkers: [],
businessmarkers: [],
zoomControl: true,
mapTypeControl: true,
data: {
currentLocation: '',
search: {
lon: '',
lat: '',
unit: '',
order: 'asc',
distance: '',
type: ''
}
},
};
},
My map is rendered here:
<map :center.sync="center" :zoom.sync="zoom" :map-type-id.sync="mapType" :options="{styles: mapStyles}">
<marker v-for="m in usermarkers" :position.sync="m.position">
<info-window :position="center" :content="ifw2text"></info-window>
</marker>
<marker v-for="m in businessmarkers" :position.sync="m.position">
<info-window :position="center" :content="m.ifw2text"></info-window>
</marker>
</map>
Then in the ready function I grab the geolocation of the user via html5 and push the user's marker on to the map.
So what I'm now trying to do is dynamically center the location.
I wrapped my map html in a conditional statement like so
<div v-if="!data.center.lat && !data.center.lng">
<map :center.sync="center" :zoom.sync="zoom" :map-type-id.sync="mapType" :options="{styles: mapStyles}">
<marker v-for="m in usermarkers" :position.sync="m.position">
<info-window :position="center" :content="ifw2text"></info-window>
</marker>
<marker v-for="m in businessmarkers" :position.sync="m.position">
<info-window :position="center" :content="m.ifw2text"></info-window>
</marker>
</map>
</div>
in my data function I leave the center empty
data: function data() {
return {
center:'',
Then my ready function grabs the geolocation builds the center object and sets this.center correctly
ready () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
let centerObj ={};
centerObj.lat = position.coords.latitude;
centerObj.lng = position.coords.longitude;
this.center = centerObj;
this.usermarkers.push({
position: { lat:this.center.lat, lng: this.center.lng }
});
}.bind(this), function (error) {
if (error.code == error.PERMISSION_DENIED)
alert('Please Enable Location Services');
}.bind(this));
}
},
My console.log show the center.lat and center.lng are set but the map is still not being rendered. Shouldn't vue reload the virtual DOM when data like this is set, thus rendering the map? Am I missing something really simple or going about this the complete wrong way?

Angular Google Maps map click event works once

I've been having a problem very similar to this
However that persons question was never answered and my situation is subtly different.
I'm trying to add a click event to my map that will change the center of the map to the location of the click. My code to do this works great, but it only works once and then when I click again I get this error:
angular-google-maps.js:6815 Uncaught TypeError: Cannot read property 'click' of undefined
Here is my map object:
vm.map = {
center: {
latitude: l.latitude,
longitude: l.longitude
},
zoom: 13,
events: {
click: function(map, event, coords) {
vm.map = {
center: {
latitude: coords[0].latLng.lat(),
longitude: coords[0].latLng.lng()
},
};
$scope.apply();
}
}
};
And here's my html:
<ui-gmap-google-map center="location.map.center" zoom="location.map.zoom" draggable="true" options="tabLocations.map.options" events=location.map.events>
<ui-gmap-search-box template="'scripts/components/tab-locations/searchbox.tpl.html'" events="location.map.searchbox.events" parentdiv="'searchbox-container'"></ui-gmap-search-box>
<ui-gmap-marker ng-if="location.active" idKey="1" coords="location" options="{draggable: false, icon: 'images/icons/gps-marker-active.svg'}"></ui-gmap-marker>
<ui-gmap-marker ng-if="!location.active" idKey="1" coords="location" options="{draggable: false, icon: 'images/icons/gps-marker-inactive.svg'}"></ui-gmap-marker>
</ui-gmap-google-map>

After your first click you are redefining a brand new map with no click event:
vm.map = {
center: {
latitude: coords[0].latLng.lat(),
longitude: coords[0].latLng.lng()
},
};
This is overriding all the previous properties you had set before, which includes click.
Use setCenter instead:
click: function(map, event, coords) {
var latLng = new google.maps.LatLng(latitude: coords[0].latLng.lat(), latitude: coords[0].latLng.lng());
vm.map.setCenter(latLng);
}
Reference: Google Maps API

How to make dynamic markers in google maps with jSON?

I am trying to create dynamic markers to load information from my json file. For some reason, the json data never loads. When I try to load one marker, it works fine without the json data. I don't see what the error is. In the console, it says "TypeError: (intermediate value).error is not a function". Here is the code below.
html script link
<script src="https://maps.googleapis.com/maps/api/js?CLIENT ID HERE
&v=3.21&callback=initMap"
async defer></script>
External JS
var map;
function initMap() {
var myLatlng = {
lat: -25.363,
lng: 131.044
};
var centerZone = {
lat: 0,
lng: 0
};
map = new google.maps.Map(document.getElementById('map'), {
center: centerZone,
zoom: 3,
minZoom: 3
});
$.getJSON('data/data.json', function(data) {
$.each(data.markers, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.lon);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: value.lon
});
});
}.error(function(words) {
alert(words);
}));
var secretMessages = ['This', 'is', 'the', 'secret', 'message'];
/*marker.addListener('click', function() {
map.setZoom(6);
map.setCenter(marker.getPosition());
attachSecretMessage(marker, secretMessages[0]);
});*/
function attachSecretMessage(marker, secretMessage) {
var infowindow = new google.maps.InfoWindow({
content: secretMessage
});
marker.addListener('click', function() {
infowindow.open(marker.get('map'), marker);
});
}
// google.maps.event.addDomListener(window, 'load', initMap);
}
json data
{
"markers": [
{
"id": "1",
"name": "Mesoamerica",
"lat": "-25.363",
"lon": "131.044",
"zoomLevel": "6"
}
]
}
The json data will have more objects inside, this is just a sample of how I want it.

You need to wait until the JSON data loads before doing anything with it. I suggest placing everything that relies on the JSON file in a $.done() function, like this:
$.getJSON('data/data.json').done(function(data){
//everything else
});
Your browser will continue with the other lines of code while it's waiting for the $.getJSON function to return the data. That's why you're getting the "not a function" error; you're trying to call a function on something that doesn't exist and JS doesn't know what to do with it. If you place everything in $.done(), those lines won't execute until the JSON data has successfully been retrieved.

Gmaps API get latlng missing from event response

I'm using Angular UI Google Maps and am trying to get the latlng from where the map is clicked. Currently the map is returning a response, but without latlng. Please see my code below:
Controller
$scope.map = {
center: {
latitude: 45, longitude: -73
},
zoom: 8,
events: {
"click": function (event) {
console.log(event.latlng);
}
}
};
html
<ui-gmap-google-map events="map.events" center='map.center' zoom='map.zoom'></ui-gmap-google-map>
response from click:
Ln {gm_bindings_: Object, __gm: Wh, gm_accessors_: Object, mapTypeId: "roadmap", center: df…}__e3_: Object__gm: Whbounds: undefinedcenter: dfcontrols: Array[14]data: ghfeatures: UgetOptions: function () {gm_accessors_: Objectgm_bindings_: ObjectmapDataProviders: "Map data ©2014 Google"mapTypeId: "roadmap"mapTypes: DgmapUrl: "http://maps.google.com/maps?ll=45,-73&z=8&t=m&hl=en-US&gl=US&mapclient=apiv3"overlayMapTypes: lgstreetView: Uhtilt: 0tosUrl: "http://www.google.com/intl/en-US_US/help/terms_maps.html"uiGmap_id: "4b1e4213-59cd-4016-baac-2aa2af44fe1a"zoom: 8__proto__: c
If you need any more code please let me know.
Thanks

Turns out that the event will return it as an array from a third argument, please see fix below. I hope this helps someone :)
$scope.map = {
center: {
latitude: 45, longitude: -73
},
zoom: 8,
events: {
"click": function (event, a, b) {
console.log(a);
console.log(b);
}
}
};