Not able to load google map URL through Angularjs

I am trying to send the value from a $scope to a front end. That is a URL from google embade. But it seems like its throwing some error.

Here i am attaching a error screenshot.

Not able to load google map URL through Angularjs

And here is how my controller looks like

var module = angular.module('app', ['onsen']); module.controller('ListingMapCtrl', function($scope, $http, $rootScope) { ons.ready(function() { $scope.mapLocation="https://www.google.com/maps/embed/v1/directions?key=MY_KEY&origin=Current+Location&destination="+$rootScope.LatLong; }); });

And here is i am calling it:

<iframe ng-src="{{mapLocation}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>

Do anyone else had the same problem? Any way to rectify the problem?

Here is how my HTML Head tag looks like

<html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <title>Come To Woodstock</title> <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css"> <link rel="stylesheet" href="styles/app.css"/> <link rel="stylesheet" type="text/css" href="styles/custom.css"> <script src="lib/onsen/js/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="lib/onsen/js/angular/angular-sanatize.min.js"></script> //Script we want to include <script type="text/javascript" src="js/custom.js"></script> </head>

-------------Problems Reply------------

You need to mark the URL as safe first, first inject ngSanitize into your app and include it in your html (<script src="angular-sanatize.min.js">), and add $sce to your controller. From there you can use trustAsResourceUrl on your url and use that in your ng-src.

JS

var module = angular.module('app', ['onsen', 'ngSanitize']);
module.controller('ListingMapCtrl', function($scope, $http, $rootScope, $sce) {
ons.ready(function() {
$scope.mapLocation = "https://www.google.com/maps/embed/v1/directions?key=MY_KEY&origin=Current+Location&destination="+$rootScope.LatLong;
$scope.mapLocationURL = $sce.trustAsResourceUrl($scope.mapLocation);
});
});

HTML

<iframe ng-src="{{mapLocationURL}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>

Category:javascript Views:0 Time:2018-03-11

Related post

  • Not able to load google map 2012-01-22

    I am trying to show the user's location obtained using geolocation API on google map.but the map is not loading.What am i doing wrong ? $(document).ready(function(){ trackLocation() }) //Track the user's location with high accuracy function trackLoca

  • Not able to use Google Maps V3 with GWT 2013-04-17

    I am trying to get Googlemaps v3 to work with Google web tool kit. I am using GWT 2.5.1. I have been trying to search for the lastest release of Google Maps with GWT and ended up on this page. As per there instructions I have downloaded those 3 jar f

  • Not able to access google maps 2011-09-12

    I got the procedure for accessing google maps that we need to generate the system key and submit that key to the google api for the permission. I have successfully generated the system key by giving the path of the java and android debug key and got

  • Not able to see Google Maps on Emulator 2011-08-06

    I try to work with android with goolge maps, using google Api 2.2 leve 8. i generated the keystore and obtain the maos Api key when i run the program i am getting a screen with google logo and screen with checks. i also refered to the LOGCAT. 08-06 1

  • wp7 image control not able to load image from url (AG_E_NETWORK_ERROR) 2011-11-07

    I am facing very strange problem with wp7 image control, it can load a png image from a url but unable to load a jpg image from same url. This works <Image Source ="http://admin.surveyanalytics.com/userimages/sub-2/1517491/180_60_logo.png"/> Bu

  • labjs not loading google maps api? 2012-01-04

    I noticed that I am unable to load the google maps js libraries using labjs. I.e. $LAB.script("//maps-api-ssl.google.com/maps/api/jslibraries=geometry&v=3&sensor=false").wait() is not working for me (library is not available in my code) and I

  • Android browser doesn't load Google Maps API on page reload 2012-02-23

    I'm loading Google Maps API dynamically using this function: App.prototype.loadScript = function(src) { $(document.createElement("script")).attr({ type: "text/javascript", src: src }).appendTo("body"); }; I pass this URL as the argument: "//maps.goog

  • print to Onenote loading google map seems locked 2013-10-03

    Whenever I want to print to file a google map via Onenote, it seems "locked up" on "loading". What could be the problem? --------------Solutions------------- Verify if you are able to print to OneNote with IE 9 with all the updates installed for it?

  • What parameters should I use in a Google Maps URL to go to a lat-lon? 2010-04-17

    I would like to produce a url for Google Maps that goes to a specific latitude and longitude. Now, I generate a url such as this: http://maps.google.com/maps?z=11&t=k&q=58 41.881N 152 31.324W The resulting map comes up with a round "A" balloo

  • Load google maps v3 dynamically with ajax 2010-10-13

    When i try to load google maps v3 with ajax the result is: <script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/2/8a/main.js" type="text/javascript"></script> in the source code, i suppose that writes with javascript document.wr

  • Load google maps API when internet is available via Ext.data.connection Sencha Touch and Phonegap 2011-04-06

    I use Sencha Touch and Phonegap to build a small app. In this app I need the google maps API as I want to display a map. There is a problem if the device has no internet connection, so the google maps API couldn't be loaded in the html. So I check fo

  • Problem with loading google map v3 asynchronously 2011-06-13

    My current solution for loading Google map scripts, is the old fashion way. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> But this takes to long and rendering content is delayed. Then I look

  • Loading Google maps in a dynamic map container? 2012-04-27

    Im trying to load google maps in a dynamic map container, but I can't get it... The process: I click on a button, it makes an ajax call to show.php, and I want to show a google maps in a div loaded from show.php js file: var id = $(this).attr('rel');

  • Problem loading Google Maps. 2012-07-29

    Using 8.1 on Laptop. Can't load Google Maps due to "Group rules". How do I change this? --------------Solutions------------- Hi Gregg, We need additional information to assist you, please answer these questions. Do you use a Desktop app or Windows st

  • Will I be able to embed google maps on a website that has markers without the API key? 2010-06-16

    Will I be able to embed google maps on a website that has markers without the API key? thanks --------------Solutions------------- No, but if your website is openly accessible, you can get the API key for free. Note that this includes having differen

  • load google maps in javascript file 2010-08-13

    I want to load google maps dynamically so I only load them when needed but I keep getting the error google is not defined here is my code $(document).ready(function(){ if($('.geotags').length > 0){ $("head").append('<script type="text/javascrip

  • Can you load Google Maps API v3 via Google AJAX API loader 2011-03-14

    Some time ago I used the regular method of loading Google Maps API like this: <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true"> Later I switched to Google AJAX APIs to load Google

  • Google maps URL. I want to create a URL to google maps. I want to show search near specific coordonates 2011-05-16

    I have the longitude,latitude and the name of the place i want to look for, how do i edit the google maps URL sow i obtain all the places(name of the place) near the coordinates? I know i could be able to do this using google map API, but just for a

  • How to obtain dynamic google map url of a specific map (I have static map url) 2011-08-18

    I have the below static google map url. just want to know the equivalent for dynamic map. Static Google Map URL I am not sure if it is v2 or v3. --------------Solutions------------- Replace center by q and just swap the base URLs: http://maps.googlea

  • Verification of User Entered Google map URL 2012-03-21

    Hi I am currently working on a real estate site. the users on the website can post ads related to their property. they also have an option to enter google map url if they want their ad to have a map of the location. My problem is how will i verify if

  • Memory warning when loading google map in UIWebView 2012-04-17

    In my app UIWebView loads Google maps, while using this Direction url == http://maps.google.com/maps?f=d&hl=en&geocode=&saddr=37.774930,-122.419415&daddr=37.7655277,-122.421811&ie=UTF8&z=12, it throws "Received memory warning"

  • Performance issue with the computer and computer hangs and freezes. Not able to load the game websites. Error: check the DNS settings. 2012-07-13

    Old Title: havesystem 8 sign keeps saying check dsn can;t load page. Website URL Web Site Troubleshoot Webpage have system 8 in a lap top, very slow to load up. wont load some game pages tells me to check dsn or reload later. sometimes freezes. This

  • From one internet service provider i am able to received and send massage through outlook but from other internet service provider i am not able to send or received massges through outlook 2013-01-24

    From one internet service provider i am able to received and send massage through outlook but from other internet service provider i am not able to send or received massges through outlook --------------Solutions------------- Mention the type of emai

  • Error 404 when clicking on a link pointing to a Google map URL 2013-02-04

    I'm using Windows Phone (Metro) on Nokia Lumia 900. When I open a web page in IE and click a link pointing to an address at Google maps, I get the following error (from Google maps): 404. That's an error. The requested URL /webhp?source=mofe&tbm=

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.178 (s). 11 q(s)