I am using below html code for using google maps in WebBrowser in my WinForms application.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var prevLat = 0;
var prevLon = 0;
function initMap() {
var centerPoint = {lat: 12.9716, lng: 77.5946};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: centerPoint
});
}
function AddPoint(latitude, longitude, heading, fixTypeColor, portNumber){
if(prevLat == 0 && prevLon == 0)
{
var Coordinates = [
{lat: latitude, lng: longitude}
];
}
else
{
var Coordinates = [
{lat: prevLat, lng: prevLon},
{lat: latitude, lng: longitude}
];
}
prevLat = latitude;
prevLon = longitude;
var newPoint = {lat: latitude, lng: longitude};
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
rotation: heading
};
var polyLine = new google.maps.Polyline({
map: map,
path: Coordinates,
icons: [{
icon: lineSymbol,
fixedRotation: true,
offset: '100%'
}],
geodesic: true,
strokeColor: fixTypeColor,
strokeOpacity: 1.0,
strokeWeight: 2
});
map.panTo(newPoint);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap">
</script>
</body>
</html>
When WebBrowser is launched, I am getting the following error:
Line: 48
Char: 5
Error: 'google' is undefined
Code: 0
However, the map is working fine after I click Yes for this exception.
Please help me in fixing this exception.
P.S. I have replaced Google Maps JavaScript API Key with 'my_key' here.
Related
I'm facing an issue with the circle marker in ui leaflet plugin. When ever a some one clicks on a circle im getting the popup but if I click outside the circle in the map and then try clicking circle again the popup is not coming up.
Can you please suggest what might be the problem? and is there any workaround for this?
Steps to reproduce
In map click one circle marker
Move the circle marker out of scope of map
Then try clicking any other marker the pop up will not appear
If I clicked outside the circle and clicked circle again the pop up appears again
Below is the snippet of the code if you need full code please visit this github link
https://github.com/Umamaheswaran1990/learningleaflet
HTML
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
<script src="../bower_components/ui-leaflet/dist/ui-leaflet.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<script src="app.js"></script>
</head>
<body ng-controller="LayersSimpleController as vm">
<leaflet center="center" tiles="tiles" paths="paths" width="50%" height="480px"></leaflet>
</body>
</html>
JS
var app = angular.module("demoapp", ['ui-leaflet']);
app.controller("LayersSimpleController", ["$scope", function ($scope) {
var vm = this;
$scope.$on('leafletDirectiveMap.map.load', function (event, data) {
var map = data.leafletObject;
map.attributionControl.setPrefix(false);
});
$scope.$on('leafletDirectiveMap.moveend', function (event, data) {
activate();
});
var map = [
{ "lat": 30.7559, "lon": -96.489 },
{ "lat": 41.8887, "lon": -111.769 }];
angular.extend($scope, {
center: {
lat: 39.774769,
lng: -98.789062,
zoom: 4,
minZoom: 4,
zoomControl: true,
},
events: {},
tiles: {
url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
options: {
subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
},
layers: {},
defaults: {
}
}
});
activate();
function activate() {
$scope.paths = {};
angular.forEach(map, function (value, key) {
if (value.lat !== null && value.lon !== null) {
$scope.paths['circle' + key] = {
type: 'circleMarker',
className: 'testClass',
fillColor: 'DarkSlateGray',
color: '#000000',
weight: 0,
opacity: 1,
message: 'This is a test marker',
fillOpacity: 0.8,
stroke: false,
clickable: true,
latlngs: [parseFloat(value.lat), parseFloat(value.lon)],
radius: 20
};
}
});
}
}]);
I got it to work by adding
event-broadcast="events"
to the leaflet element in index.html, and adding
events: {
path: {
enable: ['click']
}
},
to app.js
I'm not sure why this was necessary as the ui-leaflet events example says that all broadcast events are enabled by default. http://angular-ui.github.io/ui-leaflet/examples/0000-viewer.html#/basic/events-example
I am trying to display a Polyline on an Ionic application using Angular Google Maps with coordinates from a database. I read the documentation on the Angular Google Maps site regarding getting the coordinates and attempting to create the path via the coordinates from an API. I tried using Angular.forEach to use checklat and checklong as my coordinates but it doesn't show anything on the map. How can I use the coordinates on the data below to display as a polyline?
Data from API:
_id "57393e042613d90300a35a0a"
tripstatus "1"
tripcreated "1463367863236"
tripdescription "testing one two three. i am ironman."
tripname "New trip to test user current trip"
__v 0
checks
0 checklat " 10.72403187357376"
checklong "122.53443290985284"
time "1463367863236"
_id "57394ae62613d90300a35a10"
1 checklat "10.724010661667863"
checklong "122.53442867631733"
time "1463367863236"
_id "57394b272613d90300a35a16"
2 checklat "10.6817828"
checklong "122.5389465"
time "1463367863236"
_id "57394c662613d90300a35a1a"
My Controller:
TripFac.getTrip(id).success(function(data) {
$scope.trips = data;
var latlng = data[0].checks;
angular.forEach(latlng, function(path) {
path = {
latitude: checklat,
longitude: checklong
}
});
$scope.latlng = latlng;
});
//Get Trip Points and put on polyline
$scope.polylines = [];
uiGmapGoogleMapApi.then(function(){
$scope.polylines = [
{
path: latlng,
stroke: {
color: '#6060FB',
weight: 3
},
geodesic: true,
visible: true,
icons: [{
icon: {
path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW
},
offset: '25px',
repeat: '50px'
}]
}
];
});
My view:
<ui-gmap-google-map
center="map.center"
zoom="map.zoom"
id="wrapper">
<style>
.angular-google-map-container { height:450px; width:auto; }
</style>
<ui-gmap-polyline ng-repeat="p in polylines" path="p.path" stroke="p.stroke" visible='p.visible' geodesic='p.geodesic' fit="false" editable="p.editable" draggable="p.draggable" icons='p.icons'></ui-gmap-polyline>
</ui-gmap-google-map>
Foe example
$scope.map.center = {
latitude: $scope.latitude,
longitude: $scope.longitude
};
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
var directionsService = new google.maps.DirectionsService();
$scope.directions = {
origin: new google.maps.LatLng($scope.lat, $scope.lng),
destination: new google.maps.LatLng($scope.latitude, $scope.longitude),
showList: false
}
var request = {
origin: $scope.directions.origin,
destination: $scope.directions.destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap($scope.map.control.getGMap());
} else {}
});
It could be related with one of the following reasons:
undefined latlng object is passed into $scope.polylines, needs to be changed to $scope.latlng
$scope.polylines could be initialized before json data is getting loaded
The following example demonstrates how to load data from external source and initialize a polygon(s) on the map:
angular.module('map-example', ['uiGmapgoogle-maps'])
.controller('MapController', function($scope, $http, uiGmapGoogleMapApi, uiGmapIsReady) {
$scope.map = {
zoom: 12,
bounds: {},
center: { latitude: 10.6817828, longitude: 122.53443290985284 }
};
var loadPathData = function() {
return $http.get('https://rawgit.com/vgrem/3fc4ffc90de778f38f09b671466001fa/raw/8da45ddf4b174d758892e8a6514fea9145f4b91b/data.json')
.then(function(res) {
//extract data
return res.data[0].checks.map(function(item) {
return {
latitude: item.checklat,
longitude: item.checklong
}
});
});
};
var drawPolylines = function(path) {
$scope.polylines = [
{
path: path,
stroke: {
color: '#6060FB',
weight: 3
},
geodesic: true,
visible: true,
icons: [{
icon: {
path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW
},
offset: '25px',
repeat: '50px'
}]
}
];
}
uiGmapIsReady.promise()
.then(function(instances) {
loadPathData()
.then(drawPolylines);
});
});
.angular-google-map-container {
height: 450px;
width: auto;
}
<div ng-app="map-example" ng-controller="MapController">
<ui-gmap-google-map center="map.center" zoom="map.zoom" id="wrapper">
<ui-gmap-polyline ng-repeat="p in polylines" path="p.path" stroke="p.stroke" visible='p.visible' geodesic='p.geodesic' fit="false"
editable="p.editable" draggable="p.draggable" icons='p.icons'></ui-gmap-polyline>
</ui-gmap-google-map>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
</div>
I am testing out angular js google map http://angular-ui.github.io/angular-google-maps/#!/api
I can add multiple marker on the map, however i am unable to set the event listener to each marker. i just want it to write into console when user click any of the marker.
How can i make my codes work?
Below are my codes:
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="//maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places&sensor=false&language=en&v=3.17"></script>
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.26/angular.js" data-semver="1.2.26"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--css-->
<style type="text/css">
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
}
#map_canvas {
position: relative;
}
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
<script>angular.module('appMaps', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function($scope) {
$scope.map = {
center: {
latitude: 34.963916,
longitude: 104.311893
},
zoom: 4,
bounds: {},
};
$scope.options = {
scrollwheel: false
};
var createRandomMarker = function(i, bounds, idKey) {
var lat_min = bounds.southwest.latitude,
lat_range = bounds.northeast.latitude - lat_min,
lng_min = bounds.southwest.longitude,
lng_range = bounds.northeast.longitude - lng_min;
if (idKey == null) {
idKey = "id";
}
var latitude = lat_min + (Math.random() * lat_range);
var longitude = lng_min + (Math.random() * lng_range);
var ret = {
latitude: latitude,
longitude: longitude,
title: 'm' + i
};
ret[idKey] = i;
return ret;
};
$scope.randomMarkers = [];
// Get the bounds from the map once it's loaded
$scope.$watch(function() {
return $scope.map.bounds;
}, function(nv, ov) {
// Only need to regenerate once
if (!ov.southwest && nv.southwest) {
var markers = [];
for (var i = 0; i < 2; i++) {
var ret = {
latitude: 34.963916,
longitude: 104.311893,
title: 'm3',
id: 1
};
var ret2 = {
latitude: 37.096002,
longitude: 126.987675,
title: 'm2',
id:2
};
markers.push(ret);
markers.push(ret2);
}
$scope.randomMarkers = markers;
}
}, true);
$scope.marker = {
events:{click: console.log('click')},
}
});
</script>
</head>
<body>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds" events = "'map.events'">
<ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" click="'test'" events = "'events'"></ui-gmap-markers>
</ui-gmap-google-map>
</div>
<!--example-->
</body>
</html>
I will look further into this later today. One way I can think of at the moment is to set the click argument in <ui-gmap-markers> to a valid JS function that calls console.log().
In my case, I made click="onClick" and then defined the following function:
$scope.onClick = function onClick() {
console.log("click");}
Click Event on google map
i am not know about map api in angular but i had some suggestions you can use map api with canvas you can give ng-click event on canvas element code is here
site:jsfiddle.net/xSPAA/536/
How do I fire the event inside infowindow.
I have a button inside google maps infowindow using ng-click.
When I click it, nothing alert and error.
Any idea?
var infoWindow = new google.maps.InfoWindow({
maxWidth: 240,
content: "<button ng-click=\"test()\">Click me</button>"
});
Test function.
$scope.test = function() {
alert('This is infowindow');
}
To make ng-click event trigger, info window content needs to be compiled using $compile service.
Example
angular.module('map-example', [])
.controller('MapController', function($scope, $rootScope, $compile) {
function initialize() {
$scope.map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: { lat: -38.363, lng: 131.044 }
});
$scope.cities = [
{ title: 'Sydney', lat: -33.873033, lng: 151.231397 },
{ title: 'Melbourne', lat: -37.812228, lng: 144.968355 }
];
$scope.infowindow = new google.maps.InfoWindow({
content: ''
});
for (var i = 0; i < $scope.cities.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng($scope.cities[i].lat, $scope.cities[i].lng),
map: $scope.map,
title: $scope.cities[i].title
});
var content = '<a ng-click="cityDetail(' + i + ')" class="btn btn-default">View details</a>';
var compiledContent = $compile(content)($scope)
google.maps.event.addListener(marker, 'click', (function(marker, content, scope) {
return function() {
scope.infowindow.setContent(content);
scope.infowindow.open(scope.map, marker);
};
})(marker, compiledContent[0], $scope));
}
}
$scope.cityDetail = function(index) {
alert(JSON.stringify($scope.cities[index]));
}
google.maps.event.addDomListener(window, 'load', initialize);
});
html, body {
height: 400px;
margin: 0;
padding: 0;
}
#map {
height: 400px;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div ng-app="map-example" ng-controller="MapController">
<div id="map"></div>
</div>
Plunker
Here you go :)
http://plnkr.co/edit/EbBWJQx5pOz0UyoayYFI?p=preview
fixed by waiting on the "domready" of the infowindow and compiling then
How i put the infoWindow for each marker here? i've been trying and someone told me that i can´t use and event with an array. please help me.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>//<![CDATA[
var map;
var infoWindow;
var i;
var mapOptions = {
center: new google.maps.LatLng(0.0, 0.0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var PMarkers = [
[51.515482718, -0.142903122, '<b>esta es una prueba de html</b>'],
[25.2644444, 55.3116667, '<b>esta es otra prueba de html</b>']
];
var posMarkers = {};
var path = [
new google.maps.LatLng(51.515482718, -0.142903122),
new google.maps.LatLng(25.2644444, 55.3116667)
];
var line;
var path2 = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];
var poly;
//--------------------------------------------------------------------------------------------------
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (var i = 0; i < PMarkers.length; i++) {
posMarkers[i] = new google.maps.Marker({
position: new google.maps.LatLng(PMarkers[i][0], PMarkers[i][1]),
map: map,
visible: true
});
google.maps.event.addListener(posMarkers, 'click', (function(posMarkers, i) {
return function() {
infoWindow.setContent(PMarkers[i][2]);
infoWindow.open(map, posMarkers);
}
})(posMarkers, i));
}
var line = new google.maps.Polyline({
path: path,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map,
visible: true
});
var poly = new google.maps.Polygon({
path: path2,
strokeColor: '#4800FF',
strokeOpacity: 1.0,
strokeWeight: 2,
fillOpacity: 0.0,
map: map,
visible: true
});
$('#toggle').change(function() {
for (var i = 0; i < PMarkers.length; i++) {
if (posMarkers[i].getVisible()) {
posMarkers[i].setVisible(false);
}
else {
posMarkers[i].setVisible(true);
}
}
});
$('#toggle2').change(function() {
{
if (line.getVisible()) {
line.setVisible(false);
}
else {
line.setVisible(true);
}
}
});
$('#toggle3').change(function() {
{
if (poly.getVisible()) {
poly.setVisible(false);
}
else {
poly.setVisible(true);
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
//]]>
</script>
</head>
<body>
<div style="padding:10px">
<input type="checkbox" id="toggle" checked="checked"><b>Markers</b>
<input type="checkbox" id="toggle2" checked="checked"><b>Polilinea</b>
<input type="checkbox" id="toggle3" checked="checked"><b>Poligono</b>
</div>
<div id="map_canvas"></div>
</body>
</html>
Thank you very much in advance for any help you can give me. BTW, you can use this code as you wish.
I figured out and put some stuff else. free for use by everyone.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>//<![CDATA[
var map;
var mapOptions = {
center: new google.maps.LatLng(0.0, 0.0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var PMarkers = [
[51.515482718, -0.142903122, '<b>una prueba de antena</b>'],
[25.2644444, 55.3116667, '<b>otra prueba de antena</b>']
];
var posMarkers = [];
var tooltips = [];
var iconMarker = {
url: 'images/orangesq.png'
};
var Antenas = [
[25.774252, -80.190262, '<b>una prueba de html</b>'],
[18.466465, -66.118292, '<b>otra prueba de html</b>']
];
var posAntenas =[];
var infAntenas =[];
var iconAnt = {
url: 'images/wifi.png'
};
var path = [
new google.maps.LatLng(51.515482718, -0.142903122),
new google.maps.LatLng(25.2644444, 55.3116667)
];
var line;
var path2 = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];
var poly;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (var i = 0; i < PMarkers.length; i++) {
var test = iconAnt;
var pos = new google.maps.LatLng(PMarkers[i][0], PMarkers[i][1]);
var marker = new google.maps.Marker({
position: pos,
map: map,
icon: test,
visible: true,
info: PMarkers[i][2]
});
var tooltip = new google.maps.InfoWindow({});
google.maps.event.addListener(marker, 'click', function(){
tooltip.setContent(this.info);
tooltip.open(map, this);
});
posMarkers.push(marker);
tooltips.push(tooltip);
}
//-------------------------------------------------------------------------------------
for (var i = 0; i < Antenas.length; i++) {
var pos1 = new google.maps.LatLng(Antenas[i][0], Antenas[i][1]);
var marker1 = new google.maps.Marker({
position: pos1,
map: map,
icon: iconMarker,
visible: true,
info: Antenas[i][2]
});
var tooltip = new google.maps.InfoWindow({});
google.maps.event.addListener(marker1, 'click', function(){
tooltip.setContent(this.info);
tooltip.open(map, this);
});
posAntenas.push(marker1);
infAntenas.push(tooltip);
}
google.maps.event.addListener(map, 'click', function(){
tooltip.close();
});
//-------------------------------------------------------------------------------------------
var line = new google.maps.Polyline({
path: path,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map,
visible: true
});
var poly = new google.maps.Polygon({
path: path2,
strokeColor: '#4800FF',
strokeOpacity: 1.0,
strokeWeight: 2,
fillOpacity: 0.0,
map: map,
visible: true
});
$('#toggle').change(function() {
for (var i = 0; i < posMarkers.length; i++) {
if (posMarkers[i].getVisible()) {
posMarkers[i].setVisible(false);
}
else {
posMarkers[i].setVisible(true);
}
if (tooltip.getMap()){
tooltip.close();
}
}
});
$('#toggle2').change(function() {
{
if (line.getVisible()) {
line.setVisible(false);
}
else {
line.setVisible(true);
}
}
});
$('#toggle3').change(function() {
{
if (poly.getVisible()) {
poly.setVisible(false);
}
else {
poly.setVisible(true);
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
//]]>
</script>
</head>
<body>
<div style="padding:10px">
<input type="checkbox" id="toggle" checked="checked"><b>Markers</b>
<input type="checkbox" id="toggle2" checked="checked"><b>Polilinea</b>
<input type="checkbox" id="toggle3" checked="checked"><b>Poligono</b>
</div>
<div id="map_canvas"></div>
</body>
</html>