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;
Related
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);
});
I'm trying to use AngularJS in my cfm files to display data from cfquery resultset.
I used below code in my cfm file.I'm not able to see any output.
P.S. I'm really new to AngularJS. So if anyone can please help me out here it would be great.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html ng-app="Demo">
<head>
<link rel="stylesheet" href="/Applications/_Common/style.css" type="text/css">
</head>
<body>
<cfsetting enablecfoutputonly="Yes">
<CF_GetProjectData project_number=349246 query_name="GetProject">
<div ng-controller="DemoController">
<div ng-repeat="number in project">
{{number.project_number}} - {{number.project_name}}
</div>
<!-- <input name="imprint" type="text" size="10" ng-model="first">
<p>{{first}}</p> -->
</div>
<cfoutput>
<script language="JavaScript" src="/CFIDE/scripts/wddx.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script language="text/javascript">
var theProjectArray; < cfwddx action = "CFML2JS"
input = "#GetProject#"
toplevelvariable = "theProjectArray" >
</script>
<script>
var Demo = angular.module("Demo", []);
Demo.controller("DemoController", function($scope) {
$scope.project = theProjectArray;
alert(theProjectArray);
});
</script>
</cfoutput>
<cfsetting enablecfoutputonly="No">
</body>
</html>
I am not sure about Angular.js but based on the code you have posted, it seems, you need to wrap ng-controller div in cfoutput. This is because you have set enablecfoutputonly="Yes". So only the content inside cfoutput will be rendered.
I'm a CF developer that's currently learning Angular as well. First of all Angular is a MVC framework and will work for you best of you follow the rules of Separation of Concern (SoC). I know unless you are using Object Relational Mapping (ORM) in CF this is counter intuitive but it will save you so much hassle and trouble shooting later.
For your problem right now though i would
combine both script blocks.
your variable theProjectArray is defined with var so it's not
global. Are you sure it's making it into your controller?
the line toplevelvariable = "theProjectArray" > ... is the greater
than sign a type-o?
After you've done those i would console.log(theProjectArray); right after it's defined. Then console.log(theProjectArray); again in your controller to ensure it's getting passed in properly.
Just for your reference here is a very basic example of a controller and a factory in angular calling a CFC. Since i've been doing things this way the only time i use ColdFusion is to retrieve data and model it. It's simplified my code and logic quite a bit and has allowed me to do a lot more now that i'm not leaning on ColdFusion.
var myapp = angular.module("test.myapp", [])
myapp.controller("MyController", function($scope, getevent) {
$scope.myData = {};
$scope.myData.doUpdate = function(item, event) {
getevent.GetProgram(item).success(function(data, status, headers, config) {
console.log(data.DATA);
$scope.test = data.DATA;
$scope.test.DATE = new Date(data.DATA.DATESTART);
});
getevent.GetProgram(item).error(function(data, status, headers, config) {
console.log("FAILED: "+item);
alert("AJAX failed!");
});
}
});
myapp.factory('getevent', function($http){
return {
GetProgram: function(item) {
var programInfo = '/foundation/cfc/calendar.cfc?method=getevent&eventid='+item;
return $http.get(programInfo);
}
};
});
Trying to utilize chart.js in my laravel app. In my controller, I'm using Eloquent to perform a simple query of the database:
//sampleController.php
public function test()
{
$inventories = Inventory::all();
$dates = $inventories->lists('updated_at');
$totals = $inventories->lists('item_4801');
return view('pages.test')
->with('dates')
->with('totals');
}
I'm passing 'dates' and 'totals' to my view:
//test.blade.php
#extends('app')
#section('content')
<canvas id="myChart" width="400" height="400"></canvas>
#stop
#section('footer')
<script src="assets/admin/js/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: {!! json_encode($dates) !!},
datasets: [
{
label: "My Data",
data: {!! json_encode($totals) !!}
}
]
};
var myLineChart = new Chart(ctx).Line(data);
</script>
#stop
This doesn't work. The chart placeholder shows but it seems the data is being read as null. I'm guessing I'm just not passing the data in the correct format, but not sure exactly how I would do that. I can confirm that the data is being passed from controller to view, as I can dump the variable and see the data. Evidently it's just not in a format that chartjs can understand.
Any information would be greatly appreciated. Just a nudge in the right direction would help.
Many thanks,
Clay
Turns out, it was the 'dates' variable causing the problem (in addition to a syntax error). Chartjs was looking for an array like:
["2015/06/08", 2015/06/13", "2015/6/20"]
instead of the collection object from the eloquent query.
So I ran $dates = array_column($inventories->toArray(), 'updated_at'); to get the array, then reformatted the dates by running:
foreach ($dates as $date){
$formatted_dates[] = date('m/d/Y', strtotime($date));
}
Then I passed $formatted_dates to the view.
I'm sure there's a better way, but I'm learning more everyday and it works for me!
In your model;
use this
public function getCreatedAtAttribute($value)
{
return date('m/d/Y', strtotime($value));
}
So, here's what I'm trying to do. I'm working on an ecommerce system, with multiple analytics entities. I want to create a javascript variable that they can all access.
Checkout page example:
<script type="text/javascript">
(function(_analytics){
_analytics.page_type = '$page_type';
_analytics.cart = null;
_analytics.order = null;
_analytics.product = null;
if( $page_type == 'order_confirmation' ){
_analytics.order.products = [];
_analytics.order.total = '$order_total';
foreach ( $purchased_product ){
_analytics.order.products.push({
'sku' : $sku,
'price' : $price,
'quantity' : $quantity
});
}
}
}(_analytics = window._analytics || {}
));
</script>
This is the first tag on my page. After this tag, I include Google analytics, Google remarketing and the other analytics scripts. In those scripts I will loop through the javascript variables that are already created in order to track purchases.
Remarketing tag that comes after the first tag:
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: '',
ecomm_pagetype: _analytics.page_type,
ecomm_totalvalue = _analytics.order.total;
};
/* <![CDATA[ */
var google_conversion_id = XXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
Are there any disadvantages or gotchas that I should be aware of when trying to implement something like this? Google tag assistant complains that the Google remarketing page type variable is incorrectly set, but if I console.log(google_tag_params.ecomm_pagetype) I get the correct value.
Just in case anyone has a similar problem / question I figured this out. I was using a "dummy" remarketing id to test (0000). Apparently, the remarkting tag didn't like this value. Once I changed it to the actual remarketing id, it worked just fine.
I'm trying to center my map based on the location of the visitor, but somehow it doesn't work.
I have a PHP variable containing the country code of my visitor, which works fine when i check the source code in my browser. It looks like this;
<head>
...
<script type="text/javascript">
var lang = <?php echo $lang; ?>;
</script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body onload="initialize()">
...
My script.js contains these lines;
function initialize() {
if (lang == NL) {
var centerlat = 52.150892;
var centerlng = 5.534668;
var zoomlvl = 7;
}
else {
var centerlat = 52.367896;
var centerlng = 5.219407;
var zoomlvl = 13;
}
var myLatlng = new google.maps.LatLng(centerlat,centerlng);
var myOptions = {
zoom: zoomlvl,
center: myLatlng,
...
}
map = new google.maps.Map(document.getElementById("kaart"), myOptions);
When i load the page containing the map it just doesnt appear. In the source code i can see the PHP variable displaying correctly.
Firebug says lang is undefined. Any idea whats going on here?
//edit: I have another variable done in the same way which works fine. But its outside the initialize function.
Solved: Forgot quotes ^^
Try surround NL with "".
As an aside have you looked into HTML 5 geolocation? Its relatively simple to implement and will give you a much more accurate location.
Take a look here: https://developers.google.com/maps/documentation/javascript/examples/map-geolocation and here:http://www.w3schools.com/html/html5_geolocation.asp
Any idea whats going on here?
sorry, I don't have the rep to 'comment'
Is NL a string variable or a value (should it be "NL" ?)