AngularJS NgMap - javascript

I have problem with NgMap. I want to create two markers as soon as user complete typing place name in input. There are two inputs for two localization - I am using google autocomplete. After typing I am getting response with long and lat of localization.
I set watches on inputs as below:
$scope.$watch(function ($scope) { return $scope.locationFrom }, function () {
if (angular.isDefined($scope.locationFrom)) {
vm.geopositionFrom = $scope.locationFrom;
vm.cos = $scope.locationFrom.geometry.location.lat().toString() + "," + $scope.locationFrom.geometry.location.lng().toString();
}
});
Finally in the view I am using vm.cos as attribute of position
<ng-map center="[40.74, -74.18]">
<marker position="vm.cos"></marker>
</ng-map>
In vm.cos I am having correct long and lat separated with ",".
This solution is not working however when I set static position e.g
<marker position="-25.363882,131.044922"></marker>
It works as supossed.
Anyone have any idea?
PS. I am using https://ngmap.github.io/

What I understood is, you want to put marker on the position user types. For that you won't need watch as angularjs does auto-binding. You can refer following code.
Script Required
<script type="text/javascript" src="ng-map.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src= "http://maps.google.com/maps/api/js?key=YOUR_KEY&libraries=places"></script>
HTML code
<ng-map center="{{mapCenter}}" zoom="13">
<marker animation="DROP" position="{{mapCenter}}"> </marker>
</ng-map>
<input places-auto-complete types="['geocode']" on-place-changed = "myCallback(place)"
ng-model="mapCenter" component-restrictions="{country:'in'}" />
Controller
$scope.mapCenter="pune";
NgMap.getMap().then(function(map) {
console.log(map.getCenter());
console.log('markers', map.markers);
});

Related

Laravel- farhanwazir laravelgooglemaps

I am trying to add a google maps view but it doesn't seem to recognise where I want it to show. This is my current output.. just showing what appears to be the sea?
//route
Route::get('googlemap', 'MapController#map');
//controller
public function map() {
$config['center'] = 'Sydney Airport,Sydney';
$config['zoom'] = '14';
$config['map_height'] = '400px';
$gmap = new GMaps();
$gmap->initialize($config);
$map = $gmap->create_map();
return view('map',compact('map')); }
//view
<html>
<head>
<title>Laravel Google Maps Example</title>
{!! $map['js'] !!}
</head>
<body>
<div class="container">
{!! $map['html'] !!}
</div></body></html>
I have my config file set up and I have added my google API key..
Any idea why this is happening?
Use the latitude and longitude values instead of the name of the location. e.g to center the map to Kampala, Uganda I used this
$config['center'] = '0.347596, 32.582520';
It is probably too late but I will tell you my solution in case another needs it.
The solution was to add the key in a certain line of code in the GMaps.php file:
This is how it was at the beginning:
$data_location = "https://maps.google.com/maps/api/geocode/json?address=".urlencode(utf8_encode($address))."&sensor=".$this->sensor;
This is how it has to be:
$data_location = "https://maps.google.com/maps/api/geocode/json?address=".urlencode(utf8_encode($address))."&sensor=".$this->sensor."&key=".$this->apiKey;

why can't I access data within this ng-repeat?

I made the below code to learn Angular. It uses the input entered by user to make an ajax request for a json file that contains a list of object, then print that list to the user.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('myController', function($http) {
var ctlr = this;
ctlr.param = "";
ctlr.responses = [];
this.makeQuery = function() {
$http.get('http://localhost:8080?p=' + ctlr.param))
.then(function(data) {
ctlr.response = data; // data -> [{key1: value1,...},...]
});
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController as mc">
<input type="text" ng-model="mc.param">
<input type="submit" ng-click="mc.makeQuery()" value="Submit">
<ul>
<li ng-repeat="res in responses">
<span>{{res.key1}}, {{res.key2}}</span>
</li>
</ul>
</div>
</body>
</html>
When I run this code in Chrome, I see a list of empty bullet points. Chrome DevTools shows the json file returned as expected so I know ctlr.param works. However the list has empty bullet points so ng-repeat does not work correctly. It seems I cannot access cltr.responses properly. Does anyone know why?
Your responses object is binded to this and not to $scope as you are using controller as
You should use mc.responses instead of responses
<li ng-repeat="res in mc.responses">
<span>{{res.key1}}, {{res.key2}}</span>
</li>
You can read more from johnpapa style
Above solution is right but as i checked the complete code and found that there is one mistake.
In script code
ctlr.response = data; // data -> [{key1: value1,...},...] should be
ctlr.responses = data; // data -> [{key1: value1,...},...]

angularjs $scope.InputModelName is undefined

I have one input field and trying to get the value from this.
<!DOCTYPE html>
<html ng-app="Application">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script>
var app = angular.module('Application', []);
app.controller('ApplicationRootController', function ($scope) {
console.log("[Controller level value - which never come out] $scope.antiForgeryToken_test = " + $scope.antiForgeryToken_test);
$scope.SubmitFunction = function(){
console.log("[Value - which come out only after form submitted] $scope.antiForgeryToken_test = " + $scope.antiForgeryToken_test);
};
});
</script>
</head>
<body>
<form id="ApplicationRoot"
ng-controller="ApplicationRootController"
ng-submit="SubmitFunction()" >
<button type="submit">Submit</button>
<div id="AntiForgeryKeyHolder">
<input
id="antiForgeryToken_test"
ng-model="antiForgeryToken_test"
ng-init="antiForgeryToken_test='PassKey123456789'"
type="hidden" />
</div>
</form>
</body>
</html>
But what I got is undefined, So I tried using form submitting, then value come out. So my question is
How to get value from this simple input field without submitting form?
Plunker
Updated
Why console.log give me undefined since the same code give me value when it was called by submitting form ?
Code placed in view, executed after code placed in js controller. So when controller execute and call line
console.log("[Controller level value - which never come out] $scope.antiForgeryToken_test = " + $scope.antiForgeryToken_test);
ng-init in view yet not work.
For solve this you can use setTimeout like
setTimeout(function(){
console.log("[Controller level value - which never come out] $scope.antiForgeryToken_test = " + $scope.antiForgeryToken_test);
});
here callback execute after delay, so it can be after ng-init
updated plunker
Wait till controller scope receives the ng-init data from UI.
var app = angular.module('Application', []);
app.controller('ApplicationRootController', function ($scope, $timeout) {
$timeout(function(){console.log($scope.antiForgeryToken_test);}, 2000);
});
After I got great knowledge from #Grundy code in view - called after code inside controller
So, I was trying to fire code from controller only when the content is fully loaded. My final solution is below
angular.element(document).ready(function () {
console.log("[Value - After form loaded completly] $scope.antiForgeryToken_test = " + $scope.antiForgeryToken_test);
});
Plunker

Create a dynamic url expression with jasascript or angularjs for google maps

I would like to create a static image using google maps API and angularJS or JS.
The dynamic version is very simple, I did something like this:
<map center="50.575, 52.33" zoom="13" street-view-control="false" map-type-control="false">
<marker position="{{site.geo}}" title="{{site.name}}" label="{{indexToLetters($index)}}" on-click="showInfoWindow(event, site.geo, site.name)" ng-repeat="site in sites"></marker>
</map>
Combining ng-repeat with the marker element creates a map with all the markers. However, I want to export it to PDF, and I can't do it with dynamic map, so I must use static image like so:
<img width="750" height="250" ng-src="http://maps.googleapis.com/maps/api/staticmap?center=50.575, 52.33&zoom=12&size=750x250&sensor=false&markers=HOW-TO-REPEAT-SITE.GEO????>
I'm not sure how I can repeat the markers in the image url
Thank you in advance for any suggestions!
me
You can construct the image URL in your controller, and then do something like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.imgurl = constructImageUrl();
});
function constructImageUrl(){
var urlbase = "https://maps.googleapis.com/maps/api/staticmap?center=Williamsburg,Brooklyn,NY&zoom=13&size=400x400&markers=color:blue%7Clabel:S";
var markers = ["11211","11206","11222"];
var imgurl = urlbase;
for(var i in markers){
imgurl += "%7C" + markers[i];
}
return imgurl;
}
<div ng-app="myApp" ng-controller="myCtrl">
<img ng-src="{{imgurl}}" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
And for anyone else who stumbles across this, here is Google's static map API guide: https://developers.google.com/maps/documentation/static-maps/intro

Backbone: getting the html code of a view?

In order to write the HTML code of social icons (Twitter, Linkedin, etc) to a textarea so that the user can use that code elsewhere, I would like to get the HTML code of the view element, but I'm having some issues. To help illustrate this better, here is the code that creates the view:
define(function(require, exports, module) {
var _ = require('underscore');
var GridControlView = require('pb/views/grid-control');
var SocialiconsControlDialog = require('pb/views/socialicons-control-dialog');
var template = require('text!pb/templates/socialicons-grid-control.html');
var SocialiconsGridControlView = GridControlView.extend({
template: _.template(template)
,templateVars: {
partials: {
facebook: require('text!pb/templates/socialicons-grid-control-facebook.html')
,twitter: require('text!pb/templates/socialicons-grid-control-twitter.html')
,googleplus: require('text!pb/templates/socialicons-grid-control-googleplus.html')
,pinterest: require('text!pb/templates/socialicons-grid-control-pinterest.html')
,linkedin: require('text!pb/templates/socialicons-grid-control-linkedin.html')
}
}
,control_dialog: SocialiconsControlDialog
});
return SocialiconsGridControlView;
});
And, for example, the Linkedin template looks like this:
<script src="//platform.linkedin.com/in.js?<%- t.cache_buster %>" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-counter="<%- t.linkedin_option_countmode %>"></script>
What I would like to retrieve, is the parsed template code as text, something such as:
<script type="text/javascript" src="//platform.linkedin.com/in.js?0.4670609195438331">
<script data-counter="top" type="IN/Share+init">
But using something such as:
control_view.render().$el.innerHTML;, control_view.render().$el.html().text() or control_view.render().$el.html().replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, ""); doesn't return text; it returns the full HTML, and produces a Linkedin icon (when I just want the text to be written to a textarea).
Any thoughts?
Update **
I noticed that the code control_view.render().$el is working correctly on other places of the application, and returning HTML code, but for some reason in this view where I'm trying it doesn't. The code seems to break at:
$control = control_view.render().el;
and in the console I get an error which is:
TypeError: t is undefined - underscore-min.js (line 3)
Use the .outerHTML property of the $el.
var html = $('<script type="text/javascript" src="//platform.linkedin.com/in.js?0.4670609195438331">' +
'<script data-counter="top" type="IN/Share+init">');
var text = html[0].outerHTML;
$('textarea').val(text);
jsFiddle

Categories

Resources