Does anyone knows how to combine RichMarker within angular-google-maps directive?
Best regards,
Chen
I created ng-map, because of some philosophical difference.
This is very easy with ng-map. It looks like this
var app = angular.module("myApp", ["ngMap"]);
app.controller("MyController", function($scope) {
$scope.$on('mapInitialized', function(evt, map) {
new RichMarker({
map: map, // !! $scope.map
position: new google.maps.LatLng(40.80, -74.13),
draggable: true,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: '<img src="http://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/>'
});
});
});
http://plnkr.co/edit/XOY25pFzd8OnzloPvACn?p=preview
For more about ngmap, visit http://ngmap.github.io
make rich marker library a angular module. and name the factory RichMarker
Create a directive and pass the element with information to show to this directive. Also pass RichMarker factory here. simply create the marker.
Related
I have a SQL table of incidents with columns for Lat and Long. I need a map to show the location of all incidents.
SQL Database Table: Incident
Controller: MapController.cs
View: Map/Index.cshtml
Code I am currently using is below. A map shows up, but there are no markers and no errors in the console.
Controller
using Microsoft.AspNetCore.Mvc;
using Conversion.Models;
using Microsoft.Data.SqlClient;
using System.Configuration;
using System.Linq;
using System.Collections.Generic;
using System;
namespace Conversion.Controllers
{
public class MapController : Controller
{
private readonly IncidentContext _context;
public MapController(IncidentContext context)
{
_context = context;
}
[HttpGet]
public ActionResult Index()
{
var cities = new List<Incident>();
return View(cities);
}
[HttpPost]
public JsonResult GetAnswer(string question)
{
int index = _rnd.Next(_db.Count);
var answer = _db[index];
return Json(answer);
}
private static readonly Random _rnd = new Random();
private static readonly List<string> _db = new List<string> { "Yes", "No", "Definitely, yes", "I don't know", "Looks like, yes" };
}
}
View:
#model IEnumerable<Conversion.Models.Incident>
#{
ViewData["Title"] = "Map";
Layout = "~/Views/Shared/AdminLTE/_Layout.cshtml";
}
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE/API/KEY"></script>
<style type="text/css">
#map_canvas {
height: 650px;
}
</style>
</head>
<div id="map_canvas"></div>
<script>
var cities = #Html.Raw(Json.Serialize(#Model));
//console.log(cities);
$(document).ready(function() {
// execute
(function() {
// map options
var options = {
zoom: 5,
center: new google.maps.LatLng(30.4515, -91.1871),
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
// init map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
for (var i = 0; i < cities.length; i++) {
// init markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(cities[i].Lat, cities[i].Long),
map: map,
title: cities[i].Address
});
// process multiple info windows
(function(marker, i) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: cities[i].Address
});
infowindow.open(map, marker);
});
})(marker, i);
}
})();
});
</script>
Model
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace Conversion.Models
{
public partial class Incident
{
[Key]
[Column("IncidentID")]
public long IncidentId { get; set; }
[StringLength(40)]
public string Address { get; set; }
[StringLength(20)]
public string Longitude { get; set; }
[StringLength(20)]
public string Latitude { get; set; }
[Column(TypeName = "decimal(8, 6)")]
public decimal? Lat { get; set; }
[Column(TypeName = "decimal(9, 6)")]
public decimal? Long { get; set; }
}
}
I need a map to show the location of all incidents.
If you check the actual data of cities on browser side, you would find it might look like below.
In your JavaScript code of adding marker on map, you are using cities[i].Lat and cities[i].Long to set the position, which seems cause the issue.
You can try to use lat, long and address to get data from json object, like below.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(cities[i].lat, cities[i].long),
map: map,
title: cities[i].address
});
// process multiple info windows
(function (marker, i) {
// add click event
google.maps.event.addListener(marker, 'click', function () {
infowindow = new google.maps.InfoWindow({
content: cities[i].address
});
infowindow.open(map, marker);
});
})(marker, i);
Test Result
I was using kinetic-v4.0.0.js and my code run perfect. I now change to the new js since I cannot find the old one so as to download it, and I have many problems.
For example one of my problems is the applyfilter.
I have:
image.applyFilter({
filter: Kinetic.Filters.Grayscale,
callback: function() {
layer.draw();
}
});
and I get this:
Kinetic warning: Unable to apply filter. g is undefined
Does anyone know what would be the problem? Thanks in advance.
The syntax for applyFilter changed in KineticJS 4.1.0 (see the changelog)
Image.applyFilter() now takes in a required filter function, optional config object, and optional callback, rather than a config object that contained these three properties.
image.applyFilter(Kinetic.Filters.Grayscale, null, function() {
layer.draw();
});
You can also use the setFilter function:
image.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
Or set the filter through the images filter property:
var image = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true,
filter: Kinetic.Filters.Grayscale,
filterRadius: 20
});
can anyone please point me in the right direction about how to implement google maps in sencha touch 2.2.1 in an MVC fashion? a good step by step tutorial maybe?
I need to have a view and a controller but am not sure what is the correct way of doing it as regards defining map options and initializing the map. Been looking at various tutorials on the Internet but none of them matches exactly what I want to implement.
I am using a tab panel and my map needs to be displayed when clicking one of the tabs (called Location)...
first, you have to put the map panel as item of your tab container:
{
xtype: 'map',
useCurrentLocation: false,
mapOptions: {
disableDefaultUI: true,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
next, you can refer to it in the specific controller for this view in this way:
config: {
refs: {
...
mymap: '.map',
...
},
...
}
in that way you can have a reference of your map object in the controller by typing:
this.getMymap()
and can attach an handler to the map to make some action on it when it is rendered:
this.getMymap().on('maprender', this.onMapRender, this, { single: true });
where "onMapRender" is a method of your controller. You have to do in that way if you want, for example, render a marker over the map and center it, because before the "maprender" event dispatched by the map, you can not do any action over it (the GMap object simply does not yet exists), so, for example, in your controller, the handler could be:
onMapRender: function(e) {
var latLngCoordinates = new google.maps.LatLng(..., ...)
marker = new google.maps.Marker({
position: latLngCoordinates,
animation: google.maps.Animation.DROP,
map: this.getMymap().getMap()
});
this.getMymap().setMapCenter(latLngCoordinates);
}
enjoy with it ;)
I'm using following CA map :
assets/jquery-jvectormap-ca-lcc-en.js
I didn't do any modification in any file.
What i want just link all provinces to their html pages whenever someone is click on any of it.
Here is the live demo page where I'm using :http://mindsharehost.com/maps/tests/reverse-projection.html
If I understand your question correctly, you are almost done. All you need to is to redirect to the url using
location.href.
$(function () {
$('#map').vectorMap({
map: 'ca_lcc_en',
markers: markers,
onMarkerClick: function (e, index) {
location.href = markers[index].weburl;
}
});
});
I'm creating a Google Map from the developer API v3. It's populated with markers created dynamically from ColdFusion querying an MsSQL database.
<cfloop query="One">
<script>locations[<cfoutput>#One.userID#</cfoutput>
] = new google.maps.LatLng(<cfoutput>#One.latLng#</cfoutput>);
</script>
</cfloop>
I need a way to recognise the marker when its clicked so I can display address details in a box below the map and also higlight markers when a button is clicked lower on the page.
In general, you would typically assign your own custom properties to the Marker. Something like:
function markerClicked(e) {
console.log('Marker ' + marker.myData + ' has been clicked');
}
var marker = new google.maps.Marker(...);
marker.myData = 1; //this could be arbitrary data or even another object
google.maps.event.addListener(marker, 'click', markerClicked);
Adding custom data to any Google Maps API object has risks though. Google's code is obfuscated and the internal (non-documented) properties can and do change. Make sure your property is named in such a way that it won't conflict with any existing property or future property. Tip: Choose a property name longer than 3 letters.
If you are going to minify/compile/compress your maps code, then there are additional considerations.
What about :
google.maps.event.addListener(marker, "click", function (e) {
var clicked = this;
//...
});
This is pretty thoroughly documented/explained in the documentation.
https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
When you create markers, add dom listeners to the markers like this
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});