This is my vue js script to get the json data using ajax request
<script>
new Vue({
el: '#feed' ,
data: {
details: [],
},
mounted() {
this.$nextTick(function() {
var self = this;
var id = window.location.href.split('=').pop()
console.log(id)
$.ajax({
url: "https://",
method: "GET",
dataType: "JSON",
success: function (e) {
if (e.status == 1) {
self.details = e.data;
console.log(e.data)
}
else
{
console.log('Error occurred');}
}, error: function(){
console.log('Error occurred');
}
});
})
},
}) </script>
<script>
export default {
name: 'google-map',
props: ['name'],
data: function () {
return {
mapName: this.name + "-map",
markerCoordinates: [{
latitude: 51.501527,
longitude: -0.1921837
}],
map: null,
bounds: null,
markers: []
}
},
mounted: function () {
this.bounds = new google.maps.LatLngBounds();
const element = document.getElementById(this.mapName)
const mapCentre = this.markerCoordinates[0]
const options = {
center: new google.maps.LatLng(mapCentre.latitude, mapCentre.longitude)
}
this.map = new google.maps.Map(element, options);
this.markerCoordinates.forEach((coord) => {
const position = new google.maps.LatLng(coord.latitude, coord.longitude);
const marker = new google.maps.Marker({
position,
map: this.map
});
this.markers.push(marker)
this.map.fitBounds(this.bounds.extend(position))
});
}
};
</script>
<style scoped>
.google-map {
width: 800px;
height: 600px;
margin: 0 auto;
background: gray;
}
</style>
I am get errors as Uncaught SyntaxError: Unexpected token export.. I am not getting any idea how to solve the same issue. Please help me to solve
This is my html code to display all the JSON data
<div class="m-single-article" id="feed">
<p>{{details.businessName}}</p>
<p>{{details.pid}}</p>
<p v-for="inv in details.inventory">{{inv}}</p>
<p v-for="sub in details.sub_category">{{sub}}</p>
<div class="google-map" :id="mapName"></div>
</div>
But I am getting errors. Can anyone please help me to solve my issue. How can I able to get the lat and long to be displayed on the google maps. I am a beginner in vue js. Please help me to solve this issue.
Is there any another method to solve the same using google maps api? Please help me to have a solution My js fiddle link without adding google maps is https://jsfiddle.net/kzc26bgs/1/
function initMap() {
var c = [{"status": true, "data": {"pid": 5, "businessName": "Xavier Tailoring shop", "services": "All kind of stitching works", "inventory": [], "workHr": "Monday :9:00AM to 20:0PM,Thuesday :9:00AM to 20:0PM,Wednesday :9:00AM to 20:0PM,Tuesday : 9:00AM to 20:0PM,Friday :9:00AM to 20:0PM,Saturday :9:00AM to 20:0PM,Sunday :9:00AM to 20:0PM", "description": "All kind of stitching works", "category": 11, "sub_category": ["Veg Hotel"], "lat": 9.52436859, "lon": 76.82810117, "contactName": "xavier", "contactEmail": "[email protected]", "contactOfficeAddress": "koovapally perubara road", "contactNumber": "8592808201", "contactOfficeNumber": "8592808201", "state": "Kerala", "city": "Koovappally", "place": "Kanjirapally - Erumely Road", "pincode": 686518, "referer": 24, "link": 31, "views": 0, "package": 1, "listing_pic": "default", "website": "example.com"}}];
var myLatLng = {lat:c[0].data.lat , lng:c[0].data.lon };
var map = new google.maps.Map(document.getElementById('mapName'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}<div id="mapName" style="width:267px; height: 270px" />
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AddKEY&callback=initMap">
</script>var options = {
zoom: 6,
center: new google.maps.LatLng(12.92, 77.25), // Centered
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
// Init map
var map = new google.maps.Map(document.getElementById('dvMap'), options);
$.post("${pageContext.request.contextPath}/getorderlist.htm", {
aa : aa,
output : output,
}, function(data) {
}).done(function(data) {
//alert(data);
var json = JSON.parse(data);
//console.log( json);
for (var i = 0; i < json.length; i++)
{
var
png='http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
// Init markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(json[i].lat , json[i].lon),
map: map,
title: 'Click Me ' + i,
icon:png
});
// Process multiple info windows
(function(marker, i) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: json[k][i].address
});
infowindow.open(map, marker);
});
})(marker, i);
}
}).fail(function(xhr, textStatus, errorThrown) {
}).complete(function() {
$("#btn-save").prop("disabled", false);
});