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>
Related
I'm trying to know if a given marker is inside a circle radius. And I want to know if the marker is clicked so it will show an alert about the marker's position. I'm using ng-map.
Sample map image
My HTML :
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHmXV5zem_Py_aFHAwPixEyjW1cV-gJ00&callback=initMap"type="text/javascript"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>
<body ng-controller="MyController as vm">
<br/>
<br/>
<br/>
<ng-map zoom="11" center="{{vm.latlng}}" on-click="vm.setCenter(event)" tilt="0">
<marker position="[-6.5829106488490865, 106.87462984179683]" on-click="vm.foo(2,3)" draggable="true"></marker>
<shape name="circle" stroke-color='#FF0000' stroke-weight="2"
center="{{vm.latlng}}" radius="{{vm.radius}}"
on-click="vm.getRadius()"
draggable="true"
on-dragstart="vm.dragStart()"
on-drag="vm.drag()"
on-dragend="vm.dragEnd()"
editable="true">
</shape>
<traffic-layer></traffic-layer>
</ng-map>
</body>
</html>
My Controller :
var app = angular.module('myApp', ['ngMap']);
app.controller('MyController', function(NgMap) {
var map;
var vm = this;
NgMap.getMap().then(function(evtMap) {
map = evtMap;
});
vm.latlng = [-6.584957, 106.804592];
vm.radius = 5000;
vm.getRadius = function(event) {
alert('this circle has radius ' + this.getRadius());
alert('Titik Tengah : ' + this.getCenter());
}
vm.setCenter = function(event) {
console.log('event', event);
map.setCenter(event.latLng);
}
vm.foo = function(event, arg1, arg2) {
alert('this is at '+ this.getPosition());
}
vm.dragStart = function(event) {
console.log("drag started");
}
vm.drag = function(event) {
console.log("dragging");
}
vm.dragEnd = function(event) {
console.log("drag ended");
}
});
Thank you
To determine whether a marker within a circle there is google.maps.geometry.spherical.computeDistanceBetween function from geometry library
Prerequisites
load geometry library, for example:
https://maps.google.com/maps/api/js?key=--YOUR KEY GOES HERE--&libraries=geometry
The example demonstrates how to determine whether a marker is within a area(circle) and renders it with different icon:
angular.module('mapApp', ['ngMap'])
.controller('mapController', function ($scope, NgMap) {
NgMap.getMap().then(function (map) {
$scope.map = map;
});
$scope.center = [59.339025, 18.065818];
$scope.radius = 500 * 1000; //in meters
$scope.locations = [
{ id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
{ id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
{ id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
{ id: 4, name: 'Berlin', pos: [52.521248, 13.399038], },
{ id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
];
let centerLatLng = new google.maps.LatLng($scope.center[0],$scope.center[1]);
$scope.locations.forEach((loc,i) => {
let pos = new google.maps.LatLng(loc.pos[0],loc.pos[1]);
if (google.maps.geometry.spherical.computeDistanceBetween(pos, centerLatLng) <= $scope.radius) {
loc.icon = {"url": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png"};
}
});
});
<script src="https://maps.google.com/maps/api/js?libraries=geometry"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
<ng-map default-style="true" zoom="4" center="{{center}}">
<marker ng-repeat="l in locations" icon='{{l.icon}}' position="{{l.pos}}" title="{{l.name}}" id="{{l.id}}">
</marker>
<shape name="circle" stroke-color='#FF0000' stroke-weight="2" center="{{center}}" radius="{{radius}}" >
</shape>
</ng-map>
</div>
I am getting that Marker Is not defined and $scope is not defined error.
I want the latlong value by passing deviceid from the table.
I am unable to call the wcf service by Angulrjs
For Below DeviceId I have the LatLong Value(13.0357695, 77.59702219999997) In My Table
Here Is my Script
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html ng-app="RESTClientModule">
<head>
<title>Google Map</title>
<meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-1">
<!-- Bootstrap Core CSS -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<%-- <script src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script src="http://localhost:65235/GmapService.svc/getmapdata"></script>--%>
<script type="text/javascript">
var app;
var req;
var markers;
(function () {
app = angular.module("RESTClientModule", []);
})();
app.controller("RESTClientController", function ($scope, RESTClientService) {
$scope.lat = "0";
$scope.lng = "0";
$scope.markers = [];
instance = this;
instance.scope = $scope;
$scope.gMapModel = { deviceID: '911314150053752' }
req = $scope.gMapModel;
var promiseGet = RESTClientService.get();
promiseGet.then(function (pl) {
var latlng = pl.data.LatLong;
// alert(latlng);
latlng = latlng.split(',');
$scope.lat = latlng[0];
$scope.lng = latlng[1];
},
function (errorPl) {
$log.error('failure loading Employee', errorPl);
});
});
app.service("RESTClientService", function ($http) {
//alert(req);
this.get = function (result) {
return $http.post("http://localhost:65235/GmapService.svc/getmapdata", { "deviceID": "911314150055310" });
};
});
markers = [
{ "title": 'Bangalore',
"lat": $scope.lat,
"lng": $scope.lng,
"description": 'Test'
}
];
</script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
THIS IS MY HTML WHERE I WANT TO GET LATLONG??
</head>
<body ng-controller="RESTClientController">
<form id="form1" runat="server">
<div>
<div id="dvMap" style="width: 700px; height: 700px">
</div>
</div>
</form>
</body>
</html>
You need to invoke google.maps.Map from inside your controller instead of from window.onload.
HTML
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
</div>
JS
angular.module('mapsApp', []).controller('MapCtrl', function ($scope) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'),
mapOptions);
});
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/
I have been trying to get this piece of code which is meant to draw a polygon of an area on my map but it is not appearing when I try to get it working coincided with my initial code which displays my map,which is at the bottom.I'm quite new to stack overflow so take it easy on me guys.
Below is the code I am trying to get working with my initial code, which is below..
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(53.35720799587802, -6.306973099708557),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var africanPlains;
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var plainCoords = [
new google.maps.LatLng(53.3571279554267, -6.311039328575134),
new google.maps.LatLng(53.35742570514506, -6.311720609664917),
new google.maps.LatLng(53.358523839347924, -6.310964226722717),
new google.maps.LatLng(53.35879916885124, -6.310363411903381)
new google.maps.LatLng(53.358350957122745, -6.309478282928467),
new google.maps.LatLng(53.35821969422412, -6.309472918510437),
new google.maps.LatLng(53.3581076402103, -6.309118866920471),
new google.maps.LatLng(53.357460922716136, -6.308453679084778),
new google.maps.LatLng(53.357150366768224, -6.310266852378845),
];
// Construct the polygon
africanPlains = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
africanPlains.setMap(map);
// add an event listener
google.maps.event.addDomListener(window, 'load', initialize);
});
}
Initial code:....
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 400px;
height: 500px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(53.35720799587802, -6.306973099708557),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.35720799587802, -6.306973099708557),
zoom: 16,
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
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