Search Posts

Category: google-maps

ng-show only working when set to true from the beginning

I am creating a map-based application using the angularjs library ng-map and have encountered a rather strange bug. I have the following code: script.js vm.showMarker = true //Boolean to toggle marker vm.toggleMarker = function(){ if(vm.map.getZoom()>=12){ vm.showMarker = true; } else { vm.showMarker = false; } $scope.$apply(); } html <ng-map on-zoom-changed=”vm.toggleMarker()” zoom=”9″> <custom-marker> <div ng-show=”vm.showMarker”> … </div> </custom-marker> </ng-map> The idea is that the marker should only be visible if the map is zoomed enough. If […]

zIndex of map label has no effect if it’s used with GeoJSON layer

I am using Google map label to display some property from GeoJSON data on GeoJSON layer. The layer has some dark color and the label is being created behind the GeoJSON data layer due to that the map label looks blurry. I tried to apply bigger zIndex for label than data layer but it has no effect. Check out the issue in plunker. https://plnkr.co/edit/KvhIoRoibsbKk9e4k1Ch?p=preview <!DOCTYPE html> <html ng-app=”myApp”> <head> <meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” /> <script […]

Show Google Map without Current Location Permission using JavaScript

I am trying to show few pre-defined locations using google maps in a web application. But while loading map for the first time browser asks permission to get the Current location. If user block that permission then map doesn’t load at all. It just displays a blank screen. Why does google maps need to know current location even when I’m not using that anywhere in the application? How can i show simple google map with […]

angular 2: canvas and google maps

I am trying to add google map on canvas. I am using angular google maps module(agm). How can I achieve this using agm-map module. please find the code below. @html <canvas #canvas> <agm-map [latitude]=”latitude” [longitude]=”longitude” [scrollwheel]=”true” [zoom]=”zoom”> <agm-marker [latitude]=”latitude” [longitude]=”longitude”></agm-marker> </agm-map> </canvas> @component draw() { if (this.canvas.getContext) { let canvas = this.canvas; if (canvas.getContext){ let ctx = canvas.getContext(‘2d’); //to do for adding agm-map ?? } } } Source: AngularJS

ng-map shows partial map in ui

I am using ng map and geting ui for half of the screen but not geting it in full div var app = angular.module(‘app’, [‘ngMap’]); app.controller(‘ctrl’, [‘$scope’, ‘ngMap’,’$timeout’, function($scope, ngMap,$timeout) { NgMap.getMap().then(function(map) { var center = map.getCenter(); google.maps.event.trigger(map, “resize”); map.setCenter(center); }); $timeout(function() { NgMap.getMap().then(function(map) { google.maps.event.trigger(map, ‘resize’); }); }, 500); }]); #ng-map { width: 100% !important; height: 100% !important; position: absolute !important; } <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <script src=”https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js”></script> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js”></script> <div ng-app=”app” ng-controller=”ctrl”> <div map-lazy-load=”https://maps.google.com/maps/api/js” id=”ng-map” […]

Building a real estate listings app with Google Maps JavaScript API. Should I use a frontend JavaScript framework?

I’m a complete newbie to frontend JavaScript so bear with me. I am building an app displaying property listings on a map (Think Zillow/Trulia), with dynamic filtering as the user is moving the map around. I browsed through Google Maps JavaScript API’s documentation and I see that a lot of features are in-place, and I just have to modify them for my purposes. My question is, for a JS beginner like me, should I use […]

Access-Control-Allow-Origin error only for gmap elevation API [duplicate]

This question already has an answer here: How to enable CORS in AngularJs 4 answers I have try to get the elevation of site based on latitude and longitude. When i am using the ajax call i am getting error. I have tried both HTTP and HTTPS getting same error message is “No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost‘ is therefore not allowed access.” But the same URL it gives result […]

Google Maps with AngularJS

I’m new to AngularJS and I’m having trouble understanding the appropriate time to use the $compile life cycle hooks. I’ve read a few examples to supplement the $compile documentation, and this is my understanding so far: $onInit() is the appropriate place to add the initialization code for my controller. My understanding is that this is the place to set up the initial state of my controller. $postLink() is the appropriate place to register any event […]

Location coordinates blank in service.nearbySearch in ionic2 using google-geolocation

I am trying to use google maps in my application.I want to show nearby places in map. I have done it using this link https://www.joshmorony.com/create-a-nearby-places-list-with-google-maps-in-ionic-2-part-1/ https://www.joshmorony.com/create-a-nearby-places-list-with-google-maps-in-ionic-2-part-2/ in this link location.json file is used and location coordinates passed to marker. what i want to do is i want to take the location coordinates in run time and put marker in map.I am getting the list of places but location coordinated are blank. below is my code […]

marker information is not updating on marker click – angular

I want to display information about the marker on right side of map on marker click.right now after marker click a modal window will appear in that i am entering a mobile number after that corresponding marker information is displaying, after that clicking on the other marker view is not updating , same view is retaining . here is the code for (var i = 0; i < $scope.centers.length; i++) { var marker = new […]

Next Page »