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>
Related
I have a problem with getting labels on image generated by html2canvas from google maps. I try to use latest html2canvas library, because the image quality is much better, but getting problems with labels. My search lead my to z-index issue, but I cannot handle it myself. Please advise
It's a working code: https://jsfiddle.net/84mcwt17/9/
Image with the problem https://pasteboard.co/IJKZ7Vf.png
html code:
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js">
</script>
<div id="map" ></div>
<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<div id="img-out"></div>
JS code:
$(function() {
var map;
var latlng = new google.maps.LatLng(49.241943, -122.889318);
var myOptions = {
zoom: 12,
center: latlng,
fullscreenControl: false,
scale:1,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var positions = [
new google.maps.LatLng(49.241, -122.899318),
new google.maps.LatLng(49.242, -122.889318),
new google.maps.LatLng(49.243, -122.909318)
]
for (var pos of positions){
let marker = new google.maps.Marker({
position: pos,
map: map,
optimized: false,
draggable:true,
label:'1',
});
marker.setMap(map);
}
$("#btnSave").click(function() {
addMapBase64();
}); });
function addMapBase64() {
var target = document.getElementById("map");
html2canvas(target, {
useCORS: true
})
.then(function (canvas) {
var canvasImg = canvas.toDataURL("image/png");
console.log(canvasImg);
$('#img-out').html('<img src="' + canvasImg + '" alt="">');
document.getElementById("id_map_base64").value = canvas.toDataURL('image/png');
})
.catch(function (err) {
console.log(err);
});
}
css
#map {
width: 300px;
height: 200px;
}
adding 'zIndex: 0' to markers solved the issue
let marker = new google.maps.Marker({
position: pos,
map: map,
optimized: false,
draggable:true,
label:'1',
zIndex: 0
});
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);
});
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
When I add multiple kmllayers to a map it ignores the zoom level and center that I've set for the map and instead centers on the last added layer.
Can someone tell me how I'm suppose to set the zoom level and center of the map?
<script>
function initialize()
{
var location = new google.maps.LatLng(52.0,5.1);
var mapOptions = {
zoom: 15,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//Add MapLayers
var mapLayer1 = new google.maps.KmlLayer({
url: 'http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml'
});
mapLayer1.setMap(map);
var mapLayer2 = new google.maps.KmlLayer({
url: 'http://kml-samples.googlecode.com/svn/trunk/kml/kmz/balloon/balloon-image-rel.kml'
});
mapLayer2.setMap(map);
var mapLayer3 = new google.maps.KmlLayer({
url: 'http://kml-samples.googlecode.com/svn/trunk/kml/time/time-stamp-point.kml'
});
mapLayer3.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Set preserveViewport: true for all your KmlLayers
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>