I have used google map using AngularJs which is working fine. However, on clicking any marker infowindow opens but I need to open it by clicking a radio button outside the map, here is the code sample
HTML
<ng-map default-style="true" center="[24.8615, 67.0099]" zoom="11" scroll-wheel="false" zoom-to-inculude-markers="auto">
<info-window id="rider">
<div ng-non-bindable="">
{{vm.store.name}} <br/>
{{vm.store.title}}<br/>
</div>
</info-window>
<marker ng-repeat="(id, store) in vm.stores" id="{{id}}" icon="../assets/images/rider.png"
position="{{store.position}}"
on-click="vm.showStore(event, id)"></marker>
JavaScript/AngularJs
vm.stores = [
{position: [24.8820869, 67.06881520000002], title: 'Bahadrubad'},
{position: [24.8753973, 67.04096709999999], title: 'Mazar e Quaid'},
{position: [24.8758, 67.0230], title: 'Karachi Zoo'},
{position: [24.8532941, 67.01622309999993], title: 'Saddar Town'}
];
NgMap.getMap().then(function (map) {
vm.map = map;
});
vm.showStore = function (e, storeId) {
vm.store = vm.stores[storeId];
vm.map.showInfoWindow('rider', this);
};
Once the radio button list is initialized:
<label data-ng-repeat="store in vm.stores">
<input type="radio" name="storeList" ng-model="store" ng-value="{{store}}" ng-change='vm.showStoreExt({{$index}})' />
{{store.title}}
</label>
you could specify event handler to display info window as shown below:
vm.showStoreExt = function (index) {
vm.store = vm.stores[index];
var marker = vm.map.markers[index];
vm.map.showInfoWindow('rider', marker);
};
Working example
angular.module('mapApp', ['ngMap'])
.controller('mapController', function (NgMap) {
var vm = this;
vm.stores = [
{ position: [24.8820869, 67.06881520000002], title: 'Bahadrubad' },
{ position: [24.8753973, 67.04096709999999], title: 'Mazar e Quaid' },
{ position: [24.8758, 67.0230], title: 'Karachi Zoo' },
{ position: [24.8532941, 67.01622309999993], title: 'Saddar Town' }
];
NgMap.getMap().then(function (map) {
vm.map = map;
});
vm.showStoreExt = function (index) {
vm.store = vm.stores[index];
var marker = vm.map.markers[index];
vm.map.showInfoWindow('rider', marker);
};
vm.showStore = function (e, storeId) {
vm.store = vm.stores[storeId];
vm.map.showInfoWindow('rider', this);
};
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController as vm">
<label data-ng-repeat="store in vm.stores">
<input type="radio" name="storeList" ng-model="store" ng-value="{{store}}" ng-change='vm.showStoreExt({{$index}})' />
{{store.title}}
</label>
<ng-map default-style="true" center="[24.8615, 67.0099]" zoom="11" scroll-wheel="false" zoom-to-inculude-markers="auto">
<info-window id="rider">
<div ng-non-bindable="">
{{vm.store.name}} <br/> {{vm.store.title}}
<br/>
</div>
</info-window>
<marker ng-repeat="(id, store) in vm.stores" id="{{id}}" position="{{store.position}}" on-click="vm.showStore(event, id)"></marker>
</ng-map>
</div>
Related
I am using laravel livewire for my website and on that web, I created a multi-step form where I have to fetch google maps API in the first step. as I know I have to use wire: ignore when using third-party JavaScript library in Livewire component. but the problem comes when I switch from form step 2 to step 1, where google map is not rendered
This is my livewire view.
<div wire:ignore>
<div id="address-map-container" class="mt-2" style="width:100%;height:320px; ">
<div style="width: 100%; height: 100%" id="address-map"></div>
</div>
</div>
<!-- End Google Maps -->
<!-- Seach in google maps -->
<input type="text" wire:model.lazy="address_address" id="address-input"
class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md map-input"
placeholder="Search in Google Maps">
<input type="hidden" wire:model.lazy="address_latitude" id="address-latitude" value="0" />
<input type="hidden" wire:model.lazy="address_longitude" id="address-longitude" value="0" />
<!-- End in Seach google maps -->
This is my javascript code.
<script>
function initialize() {
$('form').on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
const locationInputs = document.getElementsByClassName("map-input");
const autocompletes = [];
const geocoder = new google.maps.Geocoder;
for (let i = 0; i < locationInputs.length; i++) {
const input = locationInputs[i];
const fieldKey = input.id.replace("-input", "");
const isEdit = document.getElementById(fieldKey + "-latitude").value != '' && document.getElementById(fieldKey + "-longitude").value != '';
const latitude = parseFloat(document.getElementById(fieldKey + "-latitude").value) || -6.251855;
const longitude = parseFloat(document.getElementById(fieldKey + "-longitude").value) || 106.978942;
const map = new google.maps.Map(document.getElementById(fieldKey + '-map'), {
center: {lat: latitude, lng: longitude},
zoom: 15
});
const marker = new google.maps.Marker({
map: map,
position: {lat: latitude, lng: longitude},
});
marker.setVisible(isEdit);
const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.key = fieldKey;
autocompletes.push({input: input, map: map, marker: marker, autocomplete: autocomplete});
}
for (let i = 0; i < autocompletes.length; i++) {
const input = autocompletes[i].input;
const autocomplete = autocompletes[i].autocomplete;
const map = autocompletes[i].map;
const marker = autocompletes[i].marker;
google.maps.event.addListener(autocomplete, 'place_changed', function () {
marker.setVisible(false);
const place = autocomplete.getPlace();
geocoder.geocode({'placeId': place.place_id}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
const lat = results[0].geometry.location.lat();
const lng = results[0].geometry.location.lng();
setLocationCoordinates(autocomplete.key, lat, lng);
}
});
if (!place.geometry) {
window.alert("No details available for input: '" + place.name + "'");
input.value = "";
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
});
}
}
function setLocationCoordinates(key, lat, lng) {
const latitudeField = document.getElementById(key + "-" + "latitude");
const longitudeField = document.getElementById(key + "-" + "longitude");
latitudeField.value = lat;
longitudeField.value = lng;
Livewire.emit('lat')
}
And this is my livewire controller
// Form properties
public $currentPage = 1;
public $property_name;
public $address_address;
public $postal_code;
public $property_phone_number;
public $number_of_rooms;
public $pages = [
1 => [
'heading' => 'General Information',
'subheading' => 'Enter',
],
2 => [
'heading' => 'Property Detail',
'subheading' => 'Enter',
],
];
private $validationRules = [
1 => [
'property_name' => ['required', 'min:3'],
'address_address' => ['required', 'min:3'],
'postal_code' => ['required', 'min:3'],
'property_phone_number' => ['required', 'min:3'],
'number_of_rooms' => ['required'],
],
2 => [
'password' => ['required', 'string', 'min:8'],
'confirmPassword' => ['required', 'string', 'same:password', 'min:8'],
],
];
public function updated($propertyName)
{
$this->validateOnly($propertyName, $this->validationRules[$this->currentPage]);
}
public function goToNextPage()
{
$this->currentPage++;
}
public function goToPreviousPage()
{
$this->currentPage--;
}
Can someone help me how to emit the google maps API and listen to it in JavaScript, therefore, google maps will always be rendered? Thanks
I use Laravel where I have an Amcharts' map in vue and there is a html select too with countries' name. How can solve that if I select a country then it zoom to the country on the map AND if I click to a country on the map the selected name appear on the html select too?
I could solve this with jquery (without vue) with added these lines:
$('#select').on('change', function() {
var id = this.value;
if ( '' == id ) {
map.clickMapObject(map.dataProvider);
}
else {
map.clickMapObject(map.getObjectById(id));
}
});
map.addListener("clickMapObject", function (event) {
document.getElementById("select").value = event.mapObject.id;
});
but I would like to do it in Vue and I do not really understand how should do it.
Here is my index.html
<div id="titles">
<div class="container map">
<div class="row">
<div class="col-md-9" id="mapdiv" style="width: 100%; height: 500px;"></div>
<div class="col-md-3">
<div id="listed">
<ul >
<li v-for="task in filteredCountry">
#{{task.title}}
</li>
</ul>
</div>
<select class="form-control" id="select" name="select" v-model="selectedCountry">
<option value="">Select a country</option>
<option value="All" >All</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<!-- More countries -->
</select>
</div>
</div>
</div>
</div>
Vue:
$( document ).ready(function() {
const app = new Vue({
el: '#titles',
data: {
tasks: {!! $tasks !!},
selectedCountry: "All",
},
created() {
AmCharts.makeChart( "mapdiv", {
"type": "map",
"zoomDuration": 0.1,
"colorSteps": 100,
"dataProvider": {
"map": "worldHigh",
"getAreasFromMap": true,
"areas": <?php echo '' . $countCountries . '' ?>
},
"areasSettings": {
"autoZoom": true,
"colorSolid": "#1B144B",
"selectedColor": "#1B144B",
"color": "#4DC5AC",
},
"valueLegend": {
"right": 100,
"minValue": "some",
"maxValue": "a lot!"
},
});
},
computed: {
filteredCountry: function() {
var app = this;
var countries = app.selectedCountry;
if(countries === "All") {
return app.tasks;
} else {
return app.tasks.filter(function(task) {
return (countries === 'All' || task.countries === countries);
});
}
}
},
});
});
Simply assign your map to a variable on your Vue component:
this.map = AmCharts.makeChart( "mapdiv", {});
Then on your input/select you can add v-on:change="" attribute.
<select v-on:change="onChange()" v-model="selectedCountry">
<!-- Countries here... -->
</select>
And on your component add a method called onChange:
methods: {
onChange: function() {
// Here do the logic about getting the mapObject you want
// You probaby want to use `this.selectedCountry` from your select
// and do something with the countries id.
var mapObject = map.getObjectById(id);
this.map.clickMapObject(mapObject);
}
}
UPDATE:
Steps:
this.map = AmCharts.makeChart( "mapdiv", { in created so that you can access outside.
var mapObject = this.map.getObjectById(id); in onChange
and just to be consistend with the data map: null, inside your data object.
https://jsfiddle.net/OzanKurt/4petgnau/22/
I'm new to Angular-js. I'm using JSP for front end and passing values from UI to controller.Now I need to open a new popup list where user can select an option, then pass all parameters to service ..
ng-click="rewardRetry(singleWinner)"
controller --->
$scope.retryRewardDTO = {
"mobile_number" : null,
"draw_id" : 0,
"lottery_ticket_id" : 0,
"prize" : 0,
"reward_method" :null
};
(mobile_number,draw_id,lottery_ticket_id,prize) I can assign like this
$scope.rewardRetry = rewardRetry;
function rewardRetry(rewardRetryDTO) {
$scope.retryRewardDTO.draw_id=rewardRetryDTO.draw_id;
$scope.retryRewardDTO.lottery_ticket_id=rewardRetryDTO.lottery_ticket_id;
$scope.retryRewardDTO.prize=rewardRetryDTO.prize;
$scope.retryRewardDTO.mobile_number=rewardRetryDTO.mobile_number;
//$scope.retryRewardDTO.reward_method=rewardRetryDTO.reward_method;
}
But here retryRewardDTO.reward_method -->user should be select in popup option. (wallet,m_cash,reload,,, ....etc)
calling to service
winnerService.winnerService.rewardRetry(
$scope.retryRewardDTO,
function(data, headers) {
winnerSearch();
}, function() {
});
I'm trying do something like below link.but couldn't get a proper output.please some helps to me...
visit :AngularJS Modal Popup
Finally I found the answer and here implemented new rewardService
$scope.rewardRetry = rewardRetry;
function rewardRetry(rewardRetryDTO) {
$scope.retryRewardDTO.draw_id=rewardRetryDTO.draw_id;
$scope.retryRewardDTO.lottery_ticket_id=rewardRetryDTO.lottery_ticket_id;
$scope.retryRewardDTO.prize=rewardRetryDTO.prize;
$scope.retryRewardDTO.mobile_number=rewardRetryDTO.mobile_number;
//$scope.retryRewardDTO.reward_method=rewardRetryDTO.reward_method;
var modalOptions = {
bodyText : 'Are you sure you want to retry '+$scope.retryRewardDTO.prize+'/= reward for 0'+ $scope.retryRewardDTO.mobile_number+' ? Please select a reward method first and confirm'
};
rewardService.showModal({}, modalOptions).then(
function(result) {
$scope.retryRewardDTO.reward_method = result;
$('#retry-'+rewardRetryDTO.draw_id+'-'+rewardRetryDTO.lottery_ticket_id).hide();
$timeout(function() {
winnerService.winnerService.rewardRetry(
$scope.retryRewardDTO,
function(data, headers) {
winnerSearch();
}, function() {
});
});
});
}
;
My reward_option.jsp file
<%# taglib prefix="sec"
uri="http://www.springframework.org/security/tags"%>
<div class="option">
<div class="pull-right"></div>
<div>Copyright © Lucky889 2016</div>
<input type="hidden" value="<sec:authentication property="principal.userType" />" id="user_type" />
<input type="hidden" value="<sec:authentication property="principal.operator" />" id="user_operator" />
</div>
<script type="text/ng-template" id="rewardModalContent.html">
<div class="modal-header">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
<div class="modal-body">
<%-- <p ng-repeat="(key,singleReward) in modalOptions.rewardList">{{key}}----{{singleReward}}</p> --%>
<div class="form-group">
<label class="control-label" for="reward">Reward
Method</label><select name="reward" id="reward"
ng-model="reward_method" class="form-control">
<option ng-repeat="(key,singleReward) in modalOptions.rewardList"
value="{{key}}">{{singleReward}}</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary"
data-ng-click="modalOptions.confirm(reward_method)">{{modalOptions.actionButtonText}}</button>
<button type="button" class="btn"
data-ng-click="modalOptions.cancel()">{{modalOptions.closeButtonText}}</button>
</div>
</script>
Here is my rewardService
angular.module("zmessengerRewardApp.service", []).service(
'rewardService',
function(toastr, $uibModal, $log) {
var showHeaderErrorMessage = function(header) {
toastr.clear();
toastr.error(header['lms-message'],
header['lms-root-cause-message']);
};
var showHeaderSuccessMessage = function(header) {
toastr.clear();
toastr.success(header['lms-message'],
header['lms-root-cause-message']);
};
var modalDefaults = {
backdrop : true,
keyboard : true,
modalFade : true,
templateUrl : 'rewardModalContent.html'
};
var modalOptions = {
closeButtonText : 'Cancel',
actionButtonText : 'Confirm',
headerText : 'Confirmation',
bodyText : 'Perform this action?',
rewardList : {reload:'Auto Reload',manual_reload:'Manual Reload',ez_cash:'Ezcash',mcash:'MCash',wallet:'Wallet',bank:'Bank Transfer'}
};
function showModal(customModalDefaults, customModalOptions) {
if (!customModalDefaults)
customModalDefaults = {};
customModalDefaults.backdrop = 'static';
return show(customModalDefaults, customModalOptions);
};
function show(customModalDefaults, customModalOptions) {
// Create temp objects to work with since we're in a singleton
// service
var tempModalDefaults = {};
var tempModalOptions = {};
// Map angular-ui modal custom defaults to modal defaults
// defined in service
angular.extend(tempModalDefaults, modalDefaults,
customModalDefaults);
// Map modal.html $scope custom properties to defaults defined
// in service
angular.extend(tempModalOptions, modalOptions,
customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function($scope,
$uibModalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.modalOptions.confirm = function(result) {
$uibModalInstance.close(result);
};
$scope.modalOptions.cancel = function(result) {
$uibModalInstance.dismiss('cancel');
};
}
}
return $uibModal.open(tempModalDefaults).result;
};
return {
showHeaderErrorMessage : showHeaderErrorMessage,
showHeaderSuccessMessage : showHeaderSuccessMessage,
showModal : showModal,
};
});
I am getting a problem when trying to use DayPilot Calendar in angularjs.
https://code.daypilot.org/63034/angularjs-event-calendar-open-source
When I downloaded sources and use it it was not working and throwing error
angular.js:9563 TypeError: Cannot read property 'getTime' of undefined
at loadEvents (daypilot-all.min.js:11)
at update (daypilot-all.min.js:11)
at Object.fn (daypilot-all.min.js:11)
at h.$digest (angular.js:12031)
at h.$apply (angular.js:12279)
at g (angular.js:7991)
at C (angular.js:8196)
at XMLHttpRequest.y.onreadystatechange (angular.js:8137)
Source code of the downloaded code is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DayPilot: AngularJS Event Calendar</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>
<!-- helper libraries -->
<script src="js/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- daypilot libraries -->
<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="media/layout.css" />
</head>
<body>
<div id="header">
<div class="bg-help">
<div class="inBox">
<hr class="hidden" />
</div>
</div>
</div>
<div class="shadow"></div>
<div class="hideSkipLink">
</div>
<div class="main">
<div ng-app="main" ng-controller="DemoCtrl" >
<div style="float:left; width: 160px">
<daypilot-navigator id="navi" daypilot-config="navigatorConfig" ></daypilot-navigator>
</div>
<div style="margin-left: 160px">
<div class="space">
<button ng-click="showDay()">Day</button>
<button ng-click="showWeek()">Week</button>
</div>
<daypilot-calendar id="day" daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
<daypilot-calendar id="week" daypilot-config="weekConfig" daypilot-events="events" ></daypilot-calendar>
</div>
</div>
<script>
var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
$scope.events = [];
$scope.navigatorConfig = {
selectMode: "day",
showMonths: 3,
skipMonths: 3,
onTimeRangeSelected: function(args) {
$scope.weekConfig.startDate = args.day;
$scope.dayConfig.startDate = args.day;
loadEvents();
}
};
$scope.dayConfig = {
viewType: "Day",
onTimeRangeSelected: function(args) {
var params = {
start: args.start.toString(),
end: args.end.toString(),
text: "New event"
};
$http.post("backend_create.php", params).success(function(data) {
$scope.events.push({
start: args.start,
end: args.end,
text: "New event",
id: data.id
});
});
},
onEventMove: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventResize: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventClick: function(args) {
var modal = new DayPilot.Modal({
onClosed: function(args) {
if (args.result) { // args.result is empty when modal is closed without submitting
loadEvents();
}
}
});
modal.showUrl("edit.php?id=" + args.e.id());
}
};
$scope.weekConfig = {
visible: false,
viewType: "Week",
onTimeRangeSelected: function(args) {
var params = {
start: args.start.toString(),
end: args.end.toString(),
text: "New event"
};
$http.post("backend_create.php", params).success(function(data) {
$scope.events.push({
start: args.start,
end: args.end,
text: "New event",
id: data.id
});
});
},
onEventMove: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventResize: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventClick: function(args) {
var modal = new DayPilot.Modal({
onClosed: function(args) {
if (args.result) { // args.result is empty when modal is closed without submitting
loadEvents();
}
}
});
modal.showUrl("edit.php?id=" + args.e.id());
}
};
$scope.showDay = function() {
$scope.dayConfig.visible = true;
$scope.weekConfig.visible = false;
$scope.navigatorConfig.selectMode = "day";
};
$scope.showWeek = function() {
$scope.dayConfig.visible = false;
$scope.weekConfig.visible = true;
$scope.navigatorConfig.selectMode = "week";
};
loadEvents();
function loadEvents() {
// using $timeout to make sure all changes are applied before reading visibleStart() and visibleEnd()
$timeout(function() {
var params = {
start: $scope.week.visibleStart().toString(),
end: $scope.week.visibleEnd().toString()
}
$http.post("backend_events.php", params).success(function(data) {
$scope.events = data;
});
});
}
});
</script>
</div>
<div class="clear">
</div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
i am still confused why this problem is occurring again and again
You should check the response returned by "backend_events.php". DayPilot expects an array of events in JSON format. If there is any server-side error in the script the response will return an error message instead.
Most likely, there is a problem with permissions on the server side - the PHP script needs read/write permissions for daypilot.sqlite file which is in the application root.
I'm trying to move a marker inside the google maps map. I have a function to move them and they are working fine. For testing, I had invoked them inside the script and they are working as expected.
But when I am trying to call the function within the ng-click directive, the function is getting called but the entire code is not being executed.
<md-button class="md-raised md-primary" ng-click="x()">Click here to move the marker</md-button>
Method:
$scope.x = function ()
{
console.log('a');
$scope.marker = {
id: 6,
coords: {latitude:-28.226349,longitude:-52.381581}
};
}
Inside the console the 'a' is getting printed, but the marker doesn't move to latitude: -28.226349, longitude: -52.381581.
If I call the function inside the script like this:
$scope.x = function ()
{
console.log('a');
$scope.marker = {
id: 6,
coords: {latitude:-28.226349,longitude:-52.381581}
};
}
$scope.x();
When the page is loaded, the marker is at latitude: -28.226349, longitude: -52.381581.
Entire HTML:
<md-button class="md-raised md-primary" ng-click="x()">Click here to move the marker</md-button>
<div id="map" ng-controller="MapCtrl">
<ui-gmap-google-map center='map.center' zoom='map.zoom' options="map.options">
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="6"></ui-gmap-marker>
</ui-gmap-google-map>
Take a look at this codepen here.
It is working as expected. I think the issue is with your idkey. Make the idkey dynamic and bind it to the ID of the marker object.
HTML
<div ng-app="myApp" ng-controller="gMap">
<md-button class="md-raised md-primary" ng-click="x()">Marker</md-button>
<ui-gmap-google-map
center='map.center'
zoom='map.zoom' aria-label="Google map">
<ui-gmap-marker
coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
<ui-gmap-window>
<div>{{marker.window.title}}</div>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
Controller
myApp.controller("gMap", function($scope) {
$scope.x = function() {
console.log('a');
$scope.marker = {
id: 6,
"coords": {
"latitude": "40.7903",
"longitude": "-73.9597"
}
}
}
$scope.marker = {
id: 6,
"coords": {
"latitude": "45.5200",
"longitude": "-122.6819"
}
}
$scope.map = {
center: {
latitude: 39.8282,
longitude: -98.5795
},
zoom: 4
};
});