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>
Related
I am using AmChart v5 for creating a map in globe/map view.
My expectation is - When I switch to globe view from actual flat map view then
either it should show the whole globe with the home location focused at the center
or globe should appear with the home location area focused (zoomed in) and if I zoom out manually it should show the whole globe in the center.
But look at the results in this screenshot that I got. After toggle the globe view looks broken and not showing as expected.
https://i.postimg.cc/GmQSVCDb/Map-Globe-Toggle-Not-Working-1.png
Here is the code that I am using
`
var chart = root.container.children.push(am5map.MapChart.new(root, {
panX: "translateX",
panY: "translateY",
wheelSensitivity: 0.7,
projection: am5map.geoMercator(),
homeZoomLevel: 3,
homeGeoPoint: { longitude: -0.1262, latitude: 51.5002 },
minZoomLevel: 1,
maxZoomLevel: 16
}));
var switchButton = cont.children.push(am5.Button.new(root, {
themeTags: ["switch"],
centerY: am5.p50,
icon: am5.Circle.new(root, {
themeTags: ["icon"]
})
}));
switchButton.on("active", function () {
if (!switchButton.get("active")) {
chart.set("projection", am5map.geoMercator());
chart.set("panX", "translateX");
chart.set("panY", "translateY");
}
else {
chart.set("projection", am5map.geoOrthographic());
chart.set("panX", "rotateX");
chart.set("panY", "rotateY");
}
});
`
Look at the "Animated Map" section in this article.
I was trying to achieve similar kind of map-globe functionality
(although not exactly the same)
https://preview.keenthemes.com/html/metronic/docs/charts/amcharts/maps
<html>
<head></head>
<style></style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<body>
<div id="chartdiv" style="width: 600px;height: 500px;background:#171717;margin: 0 auto;padding: 30px;"></div>
<script>
am5.ready(function () {
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(am5map.MapChart.new(root, {
panX: "translateX",
panY: "translateY",
wheelSensitivity: 0.7,
projection: am5map.geoMercator(),
homeZoomLevel: 3,
homeGeoPoint: { longitude: -0.1262, latitude: 51.5002 },
minZoomLevel: 1,
maxZoomLevel: 16
}));
var cont = chart.children.push(am5.Container.new(root, {
layout: root.horizontalLayout,
x: 20,
y: 40
}));
cont.children.push(am5.Label.new(root, {
centerY: am5.p50,
text: "Map"
}));
var switchButton = cont.children.push(am5.Button.new(root, {
themeTags: ["switch"],
centerY: am5.p50,
icon: am5.Circle.new(root, {
themeTags: ["icon"]
})
}));
switchButton.on("active", function () {
if (!switchButton.get("active")) {
chart.set("projection", am5map.geoMercator());
chart.set("panX", "translateX");
chart.set("panY", "translateY");
}
else {
chart.set("projection", am5map.geoOrthographic());
chart.set("panX", "rotateX");
chart.set("panY", "rotateY");
}
});
cont.children.push(
am5.Label.new(root, {
centerY: am5.p50,
text: "Globe"
})
);
var backgroundSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
backgroundSeries.mapPolygons.template.setAll({
fill: root.interfaceColors.get("alternativeBackground"),
fillOpacity: 0,
strokeOpacity: 0
});
backgroundSeries.data.push({
geometry: am5map.getGeoRectangle(90, 180, -90, -180)
});
var polygonSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow,
exclude : ["AQ"]
})
);
polygonSeries.set('fill', am5.color(0x2f2f2f));
var lineSeries = chart.series.push(am5map.MapLineSeries.new(root, {}));
lineSeries.mapLines.template.setAll({
stroke: root.interfaceColors.get("alternativeBackground"),
strokeOpacity: 0.3
});
var pointSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
var colorset = am5.ColorSet.new(root, {});
pointSeries.bullets.push(function () {
var container = am5.Container.new(root, {});
var circle = container.children.push(
am5.Circle.new(root, {
radius: 4,
tooltipY: 0,
fill: "#01a982",
strokeOpacity: 0,
tooltipText: "{title}"
})
);
return am5.Bullet.new(root, {
sprite: container
});
});
var cities = [
{
title: "Brussels",
latitude: 50.8371,
longitude: 4.3676
},
{
title: "Copenhagen",
latitude: 55.6763,
longitude: 12.5681
},
{
title: "Paris",
latitude: 48.8567,
longitude: 2.351
},
{
title: "Reykjavik",
latitude: 64.1353,
longitude: -21.8952
},
{
title: "Moscow",
latitude: 55.7558,
longitude: 37.6176
},
{
title: "Madrid",
latitude: 40.4167,
longitude: -3.7033
},
{
title: "London",
latitude: 51.5002,
longitude: -0.1262,
url: "http://www.google.co.uk"
},
{
title: "Peking",
latitude: 39.9056,
longitude: 116.3958
},
{
title: "New Delhi",
latitude: 28.6353,
longitude: 77.225
},
{
title: "Tokyo",
latitude: 35.6785,
longitude: 139.6823,
url: "http://www.google.co.jp"
},
{
title: "Ankara",
latitude: 39.9439,
longitude: 32.856
},
{
title: "Buenos Aires",
latitude: -34.6118,
longitude: -58.4173
},
{
title: "Brasilia",
latitude: -15.7801,
longitude: -47.9292
},
{
title: "Ottawa",
latitude: 45.4235,
longitude: -75.6979
},
{
title: "Washington",
latitude: 38.8921,
longitude: -77.0241
},
{
title: "Kinshasa",
latitude: -4.3369,
longitude: 15.3271
},
{
title: "Cairo",
latitude: 30.0571,
longitude: 31.2272
},
{
title: "Pretoria",
latitude: -25.7463,
longitude: 28.1876
}
];
for (var i = 0; i < cities.length; i++) {
var city = cities[i];
addCity(city.longitude, city.latitude, city.title);
}
function addCity(longitude, latitude, title) {
pointSeries.data.push({
geometry: { type: "Point", coordinates: [longitude, latitude] },
title: title
});
}
// Make stuff animate on load
chart.appear(1000, 100);
}); // end am5.ready()
</script>
</body>
</html>
I have been searching all over the internet for a solution - but no luck.
I'm setting up a website in Umbraco (AngularJS) - and I use UI-Google-Map plugin - and it works great!
I have implemented route directions, and it works like a charm - my only problem is, that I can't change the "A" and "B" icon when the directions show on the map.
This is what my scope looks like:
$scope.map = {
center: {
latitude: 55.711898,
longitude: 9.5387363
},
zoom: 12,
events: {
'tilesloaded': function (map) {
if (load) {
$timeout(function () {
maps.event.trigger(map, "resize");
var marker = new maps.Marker({
position: center,
map: map,
icon: biscuitIcon
});
marker.setMap(map);
map.setCenter(marker.getPosition());
directionsDisplay.setMap(map);
}, 500);
load = false;
} else {
maps.event.trigger(map, "resize");
}
}
},
options: {
disableDefaultUI: true,
zoomControl: false,
styles: [{'featureType':'water','elementType':'all','stylers':[{'color':'#f0f0f0'}]},{'featureType':'landscape','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'road.highway','elementType':'geometry','stylers':[{'color':'#000000'}]},{'featureType':'road.arterial','elementType':'geometry.fill','stylers':[{'color':'#363636'}]},{'featureType':'poi.park','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'poi.attraction','elementType':'geometry.fill','stylers':[{'color':'#cccccc'}]}]
},
control: {}
};
And here is what happens, when you fill out the "From" - "To" form:
$scope.getDirections = function(){
directionsService.route({
origin: $scope.startlocation,
destination: $scope.endlocation,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0].legs[0];
directionsDisplay.setPanel(document.getElementById('directions-panel'));
} else {
if(status === 'NOT_FOUND') {
window.alert('No results - Please try again');
}
}
});
}
I have tried the "makeMarker" method (http://jsfiddle.net/6LwgQ/1/) but no luck. Can any of you point out where I'm banging my head against the wall?
Oh, btw. I have tried to "console.log" the info when using "makeMarker" - and all the info is shown in my console, but it does not appear on my map :( I'm seriously desperate now...
Thanks in advance!
/ Kucko
For placing markers you could utilize ui-gmap-markers directive. The folliowing example shows how print route and set end/start styled markers:
var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function ($scope, uiGmapIsReady, $log) {
$scope.startlocation = 'New York, NY';
$scope.endlocation = 'San Diego, California';
$scope.markers = [];
$scope.icons = {
start: {
url: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
size: { width: 44, height: 32 },
origin: { x: 0, y: 0 },
anchor: { x: 22, y: 32 }
},
end: {
url: 'http://maps.google.com/mapfiles/ms/micons/green.png',
size: { width: 44, height: 32 },
origin: { x: 0, y: 0 },
anchor: { x: 22, y: 32 }
}
};
$scope.map = {
center: {
latitude: 55.711898,
longitude: 9.5387363
},
zoom: 12,
options: {
disableDefaultUI: true,
zoomControl: false,
styles: [{ 'featureType': 'water', 'elementType': 'all', 'stylers': [{ 'color': '#f0f0f0' }] }, { 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] }, { 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [{ 'color': '#000000' }] }, { 'featureType': 'road.arterial', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#363636' }] }, { 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] }, { 'featureType': 'poi.attraction', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#cccccc' }] }]
},
control: {}
};
uiGmapIsReady.promise()
.then(function (instances) {
printRoute();
});
var printRoute = function () {
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: $scope.startlocation,
destination: $scope.endlocation,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(directionsRequest, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var map = $scope.map.control.getGMap();
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
directions: response,
suppressMarkers: true
});
var leg = response.routes[0].legs[0];
setMarker(0,leg.start_location, $scope.icons.start, 'title');
setMarker(1,leg.end_location, $scope.icons.end, 'title');
} else {
$log.error('Request failed: ' + status);
}
});
}
var setMarker = function (id,latLng, icon, title) {
var markerInfo = {
id: id,
latitude: latLng.lat(),
longitude: latLng.lng(),
title: title,
icon: icon
};
$scope.markers.push(markerInfo);
};
});
.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="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control" options="map.options" events="map.events">
<ui-gmap-markers models="markers" coords="'self'" icon="'icon'">
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
Plunker
As the topic, how to do that after eg. Clicking on the marker appeared in a circle centered on the parameters of a marker?
How to get: latLng (this marker).
Please help
Code:
function map() {
var x1 = [37.772323, -122.214897];
var x2 = [37.752323, -122.214897];
$('#mapFull').gmap3({
map: {
options: {
center: [37.772323, -122.214897],
zoom: 12,
mapTypeControlOptions: {
mapTypeIds: ['custom_style', google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID]
}
}
},
marker: {
values: [{
latLng: [x1[0], x1[1]],
data: 'x1'
}, {
latLng: [x2[0], x2[1]],
data: 'x2'
}
],
events: {
click: function (marker, event, context) {
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get: {name: "infowindow"}});
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow: {
anchor: marker,
options: {content: context.data},
circle: {
center: [37.772323, -122.214897],
radius: 250,
fillColor: "#008BB2",
strokeColor: "#005BB7"
}
}
});
}
}
}
}
});
}
You can add a circle centered on the clicked marker with the following code :
$('#mapFull').gmap3({
map: {
...
},
marker: {
values: [...],
events: {
click: function (marker, event, context) {
...
$(this).gmap3({
circle:{
options:{
center: [ marker.getPosition().lat(), marker.getPosition().lng()],
radius : 250,
fillColor : "#008BB2",
strokeColor : "#005BB7"
}
}
});
}
}
}
});
I have been given the following requirement.
Need to plot weather for particular main cities in Canada
I am able to get the current weather details from an API in internet through (web handler and query strings.)
Hence, I have the latitude and longitude details handy along with the the weather condition(Cloudy , sunny,Rainy etc)
I just need to show clouds on city where it is cloudy , Rainy image on city where it's raining etc
This has to be done in Javascript AMmaps .
My complete code is pasted below.I don't find a way to push my own images to the Map
AmCharts.ready(function () {
map = new AmCharts.AmMap();
map.pathToImages = "http://www.amcharts.com/lib/3/images/";
map.panEventsEnabled = true;
map.backgroundColor = "#666666";
map.backgroundAlpha = 1;
colorSteps: 1,
map.zoomControl.panControlEnabled = true;
map.zoomControl.zoomControlEnabled = true;
var dataProvider = {
map: "canadaLow",
getAreasFromMap: true,
areas: [{
id: "CA-AB", value: 3645257
},
{
id: "CA-BC", value: 4400057
},
{
id: "CA-MB", value: 1208268
},
{
id: "CA-NB", value: 751171
},
{
id: "CA-NL", value: 514536
},
{
id: "CA-NS", value: 921727
},
{
id: "CA-NT", value: 41462
},
{
id: "CA-NU", value: 31906
},
{
id: "CA-ON", value: 12851821
},
{
id: "CA-PE", value: 140204
},
{
id: "CA-QC", value: 7903001
},
{
id: "CA-SK", value: 1033381
},
{
id: "CA-YT", value: 33897
}],
images: [{ latitude: 45.532, longitude: -73.79, balloonText: "T3695", type: "circle", scale: 0.3 },
{ latitude: 43.7143, longitude: -79.7235, balloonText: "T3623", type: "circle", scale: 0.3 },
{ latitude: 45.5925, longitude: -73.5418, balloonText: "T3705", type: "circle", scale: 0.3 },
{ latitude: 43.4136, longitude: -79.7052, balloonText: "T3670", type: "circle", scale: 0.3 },
{ latitude: 51.0195, longitude: -114.1716, balloonText: "T3754", type: "circle", scale: 0.3 },
{ latitude: 45.7922, longitude: -74.0177, balloonText: "T3657", type: "circle", scale: 0.3 },
{ latitude: 42.3974, longitude: -82.2122, balloonText: "T3533", type: "circle", scale: 0.3 }],
// zoomLevel: 3.37137, // insert the values...
//zoomLatitude: 52.124368, // from the alert box...
//zoomLongitude: -96.251201,// here
};
map.dataProvider = dataProvider;
map.objectList = {
container: "listdiv"
};
map.areasSettings = {
autoZoom: false,
color: "#CDCDCD",
colorSolid: "#5EB7DE",
//selectedColor: "#5EB7DE",
//outlineColor: "#666666",
//rollOverColor: "#88CAE7",
//rollOverOutlineColor: "#FFFFFF",
selectable: true
};
map.ZoomControl = { buttonFillColor: '#CCCCCC' };
map.areasSettings = {
autoZoom: true,
//This is the parameter to be modified to change the Color of the state when SELECTED
selectedColor: "#cc9900",
//This is the parameter to be modified to change the Color of the MAP
color: '#CCFF00',
//This is the parameter to be modified to change the Color of the state when ROLLING OVER
rollOverColor: '#009900',
rollOverOutlineColor: '#009900'
};
map.mouseWheelZoomEnabled = true;
map.write("mapdiv");
});
The solution for your request in the tip section on the amchart web site.
http://www.amcharts.com/tips/weather-map/
I copy here part of the code. The key is creating an images array and the imageURL element.
var map = AmCharts.makeChart("chartdiv", {
type: "map",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataProvider: {
map: "worldLow",
zoomLevel: 5.5,
zoomLongitude: 10,
zoomLatitude: 52,
images: [{
latitude: 40.416775,
longitude: -3.703790,
imageURL: "http://extra.amcharts.com/images/weather/weather-rain.png",
width: 32,
height: 32,
label: "Madrid: +22C"
}, {
latitude: 48.856614,
longitude: 2.352222,
imageURL: "http://extra.amcharts.com/images/weather/weather-storm.png",
width: 32,
height: 32,
label: "Paris: +18C"
},#### More cities
{
latitude: 59.329323,
longitude: 18.068581,
imageURL: "http://extra.amcharts.com/images/weather/weather-rain.png",
width: 32,
height: 32,
label: "Stockholm: +8C"
}]
},
imagesSettings: {
labelRollOverColor: "#000",
labelPosition: "bottom"
},
areasSettings: {
rollOverOutlineColor: "#FFFFFF",
rollOverColor: "#CC0000",
alpha:0.8
}
});
The corresponding HTML code would be:
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
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);
}