How can i load my store dynamically into my controller so as to be able to load the lat and log on the map once any of the item in the list is taped.
listeners: {
maprender: function(component, map, geo, eOpts) {
var position = new google.maps.LatLng(5.978132,116.072617);
var marker = new google.maps.Marker({
position: position,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Working Fine'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
setTimeout(function() {
map.panTo(position);
}, 1000);
},
},
The code above works but it only locates one particular location for all the items in the list reason being that the lat and log is static. I want to make it load the lat and log dynamically from my store.
My Store:
Ext.define('List.store.Presidents', {
extend : 'Ext.data.Store',
config : {
model : 'List.model.President',
sorters : 'lastName',
storeId: 'contactmap',
grouper : function(record) {
return record.get('lastName')[0];
},
data : [{
firstName : "Ikhlas HQ",
lastName : "Tower 11A, Avenue 5, Bangsar South, No.8 Jalan Kerinchi 59200 Kuala Lumpur",
lat : 3.110649,
lng : 101.664991,
id: '200',
},
{
firstName : "PEJABAT WILAYAH SELANGOR",
lastName : "No. 97, 97-1 & 97-2, Jalan Mahogani 5/KS7, Ambang Botanic, 41200 Klang, Selangor",
lat : 3.003384,
log : 101.45256,
id: '001',
},]}
});
My Controller:
Ext.define('List.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: 'mainpanel',
},
control: {
myList: {
itemtap: 'onMyListItemTap'
},
'presidentlist': {
disclose: 'showDetail'
},
}
},
showDetail: function(list, record) {
this.getMain().push({
xtype: 'presidentdetail',
title: record.fullName(),
onMyListItemTap: function(list, index, target, record, e, eOpts) {
// some functionality needs to be here to load my store
}
});
},
});
Two ways you can do it...
list.getStore();
should return the store thats associated with the list.
But, the onMyListItemTap function returns the "record" as part of its arguments, so you could just do:
var lat = record.get('lat'),
long = record.get('long');
Related
I've just tried adding a main draggable marker on to the map. The issue I'm facing is that as soon as you drag that marker in black it creates a blue outline to one of the existing markers that are already placed on the map. I have no idea why it does this. I've isolated the bit of code where it's actually doing this, which is the click event listener that I've added to each marker, as soon as I remove this little snippet of code, it doesn't add a blue outline to any marker anymore. It's important to note, I've also tried commenting out the calls to the two inner function on this click handler however that doesn't seem to fix the issue, so it can't be those functions that are the cause.
It's also not a browser issue as the blue outline appears on both safari and chrome.
marker.addListener('click',
function() {
openCloseNav(true);
car_park_details(marker);
});
You can see the blue outline on the marker here (On the rightmost marker)
Most of the javascript I've added below.
var markers = [];
var geocoder;
var map;
var mainMarker;
function initMap() {
geocoder = new google.maps.Geocoder();
var defaultCoord = {
lat : 51.600960,
lng : -0.275770
};
map = new google.maps.Map(document.getElementById('map'), {
zoom : 15,
center : defaultCoord,
minZoom : 14,
streetViewControl : false,
controlSize : 33,
gestureHandling : 'greedy',
mapTypeControlOptions : {
mapTypeIds : []
},
styles : [ {
"featureType" : "all",
"elementType" : "all",
"stylers" : [ {
"hue" : "#008eff"
} ]
}, {
"featureType" : "road",
"elementType" : "all",
"stylers" : [ {
"saturation" : "0"
}, {
"lightness" : "0"
} ]
}, {
"featureType" : "transit",
"elementType" : "all",
"stylers" : [ {
"visibility" : "off"
} ]
}, {
"featureType" : "water",
"elementType" : "all",
"stylers" : [ {
"visibility" : "simplified"
}, {
"saturation" : "-60"
}, {
"lightness" : "-20"
} ]
} ]
});
mainMarker = new google.maps.Marker({
map,
position: defaultCoord,
draggable: true,
icon : {
url : 'mainmarker.png',
scaledSize : new google.maps.Size(30, 30),
origin : new google.maps.Point(0, 0),
}
});
google.maps.event.addListener(map, 'tilesloaded',
find_closest_markers);
google.maps.event.addListener(mainMarker, 'dragend',
find_closest_markers);
}
function geocodeEncapsulation(i) {
return (function(results, status) {
if (status == 'OK') {
var marker = new MarkerWithLabel({
map : map,
position : results[0].geometry.location,
icon : {
url : 'pin.png',
scaledSize : new google.maps.Size(40, 30),
//origin : new google.maps.Point(0, 0),
},
clickable: true,
labelContent : '£' + i.price.toFixed(2),
labelAnchor : new google.maps.Point(30, 35),
labelClass : "markerdesign",
labelInBackground : false,
title : i.name
});
marker.set("carpark", i);
marker.addListener('mouseover',
function() {
marker.set("labelClass",
"markerdesignhover");
});
marker.addListener('mouseout',
function() {
marker.set("labelClass", "markerdesign");
});
marker.addListener('click',
function() {
openCloseNav(true);
car_park_details(marker);
});
markers.push(marker);
} else {
//console.log(status);
}
});
}
Simplified Version On Fiddle, Drag the centre marker
http://jsfiddle.net/qn23wxmL/2/
Update:
Adding a separate click listener to the draggable marker solves the issue.
However I don't understand how this is working, if anyone can explain, that would be great.
I'm trying to draw a line with polyline using angular-google-maps (doc here).
I'm not very familiar with AngularJS so I've got some difficuties to do what I want to do.
I'am able to print markers on the map with this function :
function addPosition (position, refresh) {
if (! _.mHas(position, "longitude", "latitude", "username")) {
console.log("That's not a proper position entry !");
return;
}
if (position.latitude === '' || position.longitude === '' ) return;
vm.map.markers.push({
id : vm.map.markers.length,
coords : {
longitude : position.longitude,
latitude : position.latitude
},
name : position.username,
options : {
icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
draggable : false
}
});
if (refresh) {
$timeout(function () {
vm.map.control.refresh();
}, 5);
}
}
I want to draw a Polyline between my markers but I don't have the good logic to take all coordinates from my markers and create a path with them.
I know I have to do something like :
function userLocation (position){
var lat = position.latitude;
var lng = position.longitude;
var pathLine = [new google.maps.LatLng(lat, lng)];}
And then draw the Polyline with something like this:
$scope.polylines = [{
path: pathLine,
stroke: {
color: '#000000',
weight: 3
},
editable: false,
draggable: false,
geodesic: true,
visible: true,
}];
With my "logic" i'm stuck in concept where I get coordinates forEach markers and it give me path results with : coordinates of my first marker and coordinates NULL, and , NULL coordinates and coordinates of my second marker.
I've created a JSFiddle with the code if you need here, without the $scope.Polyline.
Since you are utilizing angular-google-maps library and want
to draw a Polyline between my markers but I don't have the good logic
to take all coordinates from my markers and create a path with them.
and given that data for markers is represented in the following format:
[
{
id : vm.map.markers.length,
coords : {
longitude : position.longitude,
latitude : position.latitude
},
name : position.username,
options : {
icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
draggable : false
}
}
//...
]
data for Polyline could be generated like this:
vm.map.polyline = vm.map.markers.map(m => m.coords);
Example
angular
.module("mapApp", ["uiGmapgoogle-maps"])
.controller("mapCtrl", function($scope) {
vm = this;
vm.map = {
center: {
latitude: -24.9923319,
longitude: 125.2252427
},
zoom: 4,
lineStyle: {
color: "#333",
weight: 5,
opacity: 0.7
},
markers : [
{
coords: {
latitude: -33.8473567,
longitude: 150.6517955
},
name: "Sydney",
id: 1
},
{
coords: {
latitude: -37.9716929,
longitude: 144.772958
},
name: "Melbourne",
id: 3
},
{
coords: {
latitude: -34.9998826,
longitude: 138.3309812
},
name: "Adelaide",
id: 4
},
{
coords: {
latitude: -32.0391738,
longitude: 115.6813556
},
name: "Perth",
id: 5
},
{
coords: {
latitude: -12.425724,
longitude: 130.8632684
},
name: "Darwin",
id: 6
},
{
coords: {
latitude: -16.8801503,
longitude: 145.5768602
},
name: "Cairns",
id: 7
}
],
};
vm.map.polyline = vm.map.markers.map(m => m.coords);
});
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl as vm">
<ui-gmap-google-map
center='vm.map.center'
zoom='vm.map.zoom'>
<ui-gmap-markers models="vm.map.markers" coords="'coords'" idkey="'id'" ></ui-gmap-markers>
<ui-gmap-polyline path="vm.map.polyline" draggable="false" geodesic="true" stroke="vm.map.lineStyle" fit="false"></ui-gmap-polyline>
</ui-gmap-google-map>
</div>
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.bussinessName}}</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, "bussinessName": "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": "harisxavier#gmail.com", "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);
});
I try to apply the example Extjs 6 Google Maps but it appears an error google is not defined on GMapPanel.js file. Can anyone help me why this error displays, I mention that I've spent time to read here and on other forum why this error but nothing give me the answer? thanks in advance
viewMap.js
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Google Map',
layout: 'fit',
width: 300,
height: 300,
items: [{
xtype: 'button',
id: 'show-btn',
text: 'Click here'
}]
});
Ext.require([
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
var mapwin;
Ext.get('show-btn').on('click', function () {
// create the window on the first click and reuse on subsequent clicks
if (mapwin) {
mapwin.show();
} else {
mapwin = Ext.create('Ext.window.Window', {
autoShow: true,
layout: 'fit',
title: 'GMap Window',
closeAction: 'hide',
width: 450,
height: 450,
border: false,
x: 40,
y: 60,
mapTypeId: 'google.maps.MapTypeId.ROADMAP',
mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
items: {
xtype: 'gmappanel',
center: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
lng: -71.094224,
title: 'Boston Museum of Fine Arts',
listeners: {
click: function (e) {
Ext.Msg.alert('It\'s fine', 'and it\'s art.');
}
}
}, {
lat: 42.339419,
lng: -71.09077,
title: 'Northeastern University'
}]
}
});
}
});
});
GMapPanel.js
Ext.define('Ext.ux.GMapPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.gmappanel',
requires: ['Ext.window.MessageBox'],
initComponent : function(){
Ext.applyIf(this,{
plain: true,
gmapType: 'map',
border: false
});
this.callParent();
},
onBoxReady : function(){
var center = this.center;
this.callParent(arguments);
if (center) {
if (center.geoCodeAddr) {
this.lookupCode(center.geoCodeAddr, center.marker);
} else {
this.createMap(center);
}
} else {
Ext.raise('center is required');
}
},
createMap: function(center, marker) {
var options = Ext.apply({}, this.mapOptions);
options = Ext.applyIf(options, {
zoom: 14,
center: center,
mapTypeId: 'google.maps.MapTypeId.HYBRID'
});
this.gmap = new google.maps.Map(this.body.dom, options);
if (marker) {
this.addMarker(Ext.applyIf(marker, {
position: center
}));
}
Ext.each(this.markers, this.addMarker, this);
this.fireEvent('mapready', this, this.gmap);
},
addMarker: function(marker) {
marker = Ext.apply({
map: this.gmap
}, marker);
if (!marker.position) {
marker.position = new google.maps.LatLng(marker.lat, marker.lng);
}
var o = new google.maps.Marker(marker);
Ext.Object.each(marker.listeners, function(name, fn){
google.maps.event.addListener(o, name, fn);
});
return o;
},
lookupCode : function(addr, marker) {
this.geocoder = new google.maps.Geocoder();
this.geocoder.geocode({
address: addr
}, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
},
onLookupComplete: function(data, response, marker){
if (response != 'OK') {
Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
return;
}
this.createMap(data[0].geometry.location, marker);
},
afterComponentLayout : function(w, h){
this.callParent(arguments);
this.redraw();
},
redraw: function(){
var map = this.gmap;
if (map) {
google.maps.event.trigger(map, 'resize');
}
}
});
Get a key on this site https://developers.google.com/maps/documentation/javascript/
After that you have to include the maps url with your like just a parameter in url key=your key in index.html
Then it will work.
The url looks like this
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap
You have to put it inside the <script></script> tags.
I am building an app which contains a list of addresses. This app is working in such a way that once the user clicks on each of the items (addresses) in the list, the next page shows a map, and the map has a marker which points to the exact location of the address clicked on. This is made possible due to the Latitude and Longitude coordinates stated in code.
My problem is that I have more than one address, and each of these addresses have a unique longitude and latitude. I want to make my app work in such a way that when a user clicks on any address they are interested in, the app will open a page and show the map and a marker pointing to the exact location of the address on the map. My code's below: it is working perfectly, BUT when the user clicks on the address, it takes them to the same logitude and latitude.
My store:
Ext.define('List.store.Presidents', {
extend : 'Ext.data.Store',
config : {
model : 'List.model.President',
sorters : 'lastName',
grouper : function(record) {
return record.get('lastName')[0];
},
data : [{
firstName : "Ikhlas HQ",
lastName : "Tower 11A, Avenue 5, Bangsar South, No.8 Jalan Kerinchi 59200 Kuala Lumpur",
latitude : 3.110649,
longitude : 101.664991,
id: 'm12',
},
{
firstName : "PEJABAT WILAYAH SELANGOR",
lastName : "No. 97, 97-1 & 97-2, Jalan Mahogani 5/KS7, Ambang Botanic, 41200 Klang, Selangor",
latitude : 3.003384,
longitude : 101.45256,
id: 'm1',
}, ]
}
});
My controller:
Ext.define('List.controller.Main', {
extend: 'Ext.app.Controller',
config: {
control: {
'presidentlist': {
disclose: 'showDetail'
},
}
},
showDetail: function(list, record) {
this.getMain().push({
xtype: 'presidentdetail',
title: record.fullName(),
listeners: {
maprender: function(comp, map) {
var position = new google.maps.LatLng(5.978132,116.072617);
var marker = new google.maps.Marker({
position: position,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
setTimeout(function() {
map.panTo(position);
}, 1000);
},
},
})
},
});
My view:
Ext.define('List.view.PresidentDetail', {
extend : 'Ext.Map',
xtype: 'presidentdetail',
config: {
title: 'Details',
styleHtmlContent: true,
scrollable: 'vertical',
//useCurrentLocation: true,
layout: 'fit',
mapOptions: {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
}
});
My model:
Ext.define('List.model.President', {
extend : 'Ext.data.Model',
config : {
fields : ['firstName', 'middleInitial', 'lastName', 'latitude', 'longitude']
},
fullName : function() {
var d = this.data, names = [d.firstName, (!d.middleInitial ? "" : d.middleInitial + "."), d.lastName];
return names.join(" ");
}
});
Help me out please. I need each of the addresses on the list to be tagged with a latitude and longitude so that when the user clicks on the address, it will point to the exact location the map.
Your line:
var position = new google.maps.LatLng(5.978132,116.072617);
Is fixed to the same coordinates so it will never change.
In my application I have the view fire an event to the controller and then in the controller have a reference to the record's coordinates which are then set to the map.
In view:
config: {
layout: 'fit',
items: [
{
xtype: 'map',
listeners: {
maprender: function (extMapComponent, googleMapComp) {
this.fireEvent('googleMapRender', googleMapComp);
}
}
}
]
}
Controller:
refs: {
mapRef: 'map'
},
Control: {
mapRef: {
googleMapRender: 'onGoogleMapRender'
}
}
onGoogleMapRender: function (googleMap) {
// this.selectedRecord should be set when you select the item in the list
// so that you can pull the coordinates off
var record = this.selectedRecord;
var long = record.get("Longitude");
var lat = record.get("Latitude");
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long);
});
marker.setMap(googleMap);
}