create a line between markers using ngmap - javascript

I am using ngmap and angular js to show a set of markers in a map without problem. I need paint a line that join these markers.
My code:
In view:
<map center="{{markers[0].lat}},{{markers[0].lng}}" zoom="12">
<marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
</map>
in my controller:
var app = angular.module('Items', ['ngMap'])
app.controller('CICtrl', function($scope){
$scope.markers = [{id:1, lat:37.772323, lng: -122.214897}, {id:2, lat:21.291982, lng: -157.821856}, {id:3, lat:-27.46758, lng: 153.027892}];
});


For that purpose you could utilize shape directive, for example:
<shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"></shape>
where path property is initialized from markers like this:
$scope.path = $scope.markers.map(function(marker){
return [marker.lat,marker.lng];
});
Working example
var app = angular.module('appMaps', ['ngMap']);
app.controller('mainCtrl', function ($scope) {
$scope.markers = [{ id: 1, lat: 37.772323, lng: -122.214897 }, { id: 2, lat: 21.291982, lng: -157.821856 }, { id: 3, lat: -27.46758, lng: 153.027892 }];
$scope.path = $scope.markers.map(function(marker){
return [marker.lat,marker.lng];
});
});
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl" >
<map center="{{markers[0].lat}},{{markers[0].lng}}" zoom="5">
<marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
<shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2">
</shape>
</map>
</div>
Plunker


For those who are looking to show driving directions between markers and customize the appearance of the line between each marker:
Working Example:
In your controller:
$scope.directions = [
{
origin:"Salt Lake City, Utah",
destination:"West Valley City, Utah",
panelName:"p1",
renderingOptions: {
polylineOptions: {
strokeColor: 'red'
}
},
wayPoints: [
{
location: {lat:40.6812675, lng: -111.9622787},
stopover: true
},
{
location: {lat:40.6812675, lng: -110.9622787},
stopover: true
},
]
},
{
origin:"West Valley City, Utah",
destination:"West Jordan, Utah",
panelName:"p1",
renderingOptions: {
polylineOptions: {
strokeColor: 'blue'
}
},
wayPoints: [
{
location: {lat:40.6812675, lng: -111.9622787},
stopover: true
},
{
location: {lat:40.6812675, lng: -109.9622787},
stopover: true
},
]
},
{
origin:"West Jordan, Utah",
destination:"Salt Lake City, Utah",
panelName:"p2",
renderingOptions: {
polylineOptions: {
strokeColor: 'green'
}
},
wayPoints: [
{
location: {lat:40.6812675, lng: -111.9622787},
stopover: true
},
{
location: {lat:40.6812675, lng: -108.9622787},
stopover: true
},
]
}
];
HTML:
Pass an object of the form:
renderingOptions: {polylineOptions: {strokeColor: 'red'}}
into the options attribute of the <directions> element
<div style="width: 100%; float:left; height:70%" >
<ng-map zoom="3" center="current-location" default-style="false" style="height: 450px; display:block; ">
<directions ng-repeat="dir in directions"
draggable="true"
options="{{dir.renderingOptions}}"
travel-mode="DRIVING"
waypoints="{{dir.wayPoints}}"
panel="{{dir.panelName}}"
origin="{{dir.origin}}"
destination="{{dir.destination}}">
</directions>
</ng-map>
</div>

Related

Toggle groups of markers in Google Maps API

I have several groups ("state") of markers on a map which I want to be able to toggle their visibility without reloading the page.
I'm finding lots of variations of having markergroups but they all seem to be not working with this google api version.
Here is the HTML
<input type="checkbox" id="state" name="Backlog" checked> Backlog
<input type="checkbox" id="state" name="Breached" checked> Breached
<input type="checkbox" id="state" name="Active" checked> Active
<input type="checkbox" id="state" name="Scheduled" checked> Scheduled
<div id="map" style="height:800px;"></div>
Here is the javascript
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 54.3266311, lng: -2.7585563},
mapTypeId: 'roadmap'
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: 'https://maps.google.com/mapfiles/kml/'+location.type,
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
minimumClusterSize: 2,
maxZoom: 4,
zoomOnClick: false
}
);
}
var locations = [{lat:53.750503,lng:-2.429168,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 75199925"},{lat:51.290162,lng:-0.833112,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 76669845"},{lat:51.301737,lng:0.051969,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 75199930"},{lat:50.525378,lng:-3.594341,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78875603"},{lat:51.581895,lng:-0.724800,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78581052"},{lat:50.391133,lng:-4.072097,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78106941"},{lat:51.318527,lng:-1.021035,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78396115"},{lat:50.443925,lng:-3.561630,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78875582"},{lat:53.625107,lng:-2.337432,type:'/paddle/blu-square-lv.png',state:'Active',info:"<strong>Order ID:</strong> 80444510"},{lat:52.432582,lng:-2.026563,type:'/paddle/blu-square-lv.png',state:'Active',info:"<strong>Order ID:</strong> 80423141"}]
Any help would be great :) I don't mind getting rid of the clusters, I just can't figure out how to!

HTML element ids must be unique, all your checkboxes currently have the same id.
<input type="checkbox" id="state" name="Backlog" checked> Backlog
<input type="checkbox" id="state" name="Breached" checked> Breached
<input type="checkbox" id="state" name="Active" checked> Active
<input type="checkbox" id="state" name="Scheduled" checked> Scheduled
typically that is what "name" is used for (it is allowed to be the same), so you can do this:
<input type="checkbox" name="state" id="Backlog" checked> Backlog
<input type="checkbox" name="state" id="Breached" checked> Breached
<input type="checkbox" name="state" id="Active" checked> Active
<input type="checkbox" name="state" id="Scheduled" checked> Scheduled
then when the checkboxes are clicked, process through the array of markers, setting the visible property appropriately:
google.maps.event.addDomListener(document.getElementById('Backlog'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Breached'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Active'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Scheduled'), 'click', clickListener);
function clickListener() {
var typeId = this.id;
var type;
for (var i=0; i<iconMapping.length;i++) {
if (iconMapping[i].state==typeId)
type = iconMapping[i].icon;
}
var markers = markerCluster.getMarkers();
for (var i=0; i<markers.length; i++) {
if (markers[i].getIcon().includes(type)) {
markers[i].setVisible(this.checked);
}
}
}
}
// your example doesn't include examples for Active/Scheduled, if they are
// duplicates of existing marker icons, a different approach will need to be used.
var iconMapping = [
{icon:'ylw-square-lv.png',state:'Backlog'},
{icon:'blu-square-lv.png',state:'Active'}
];
proof of concept fiddle
(if you want the clusters to reflect the currently visible icons, you will need to update the markers array passed in to it, rather than the visible property of the markers).
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {
lat: 54.3266311,
lng: -2.7585563
},
mapTypeId: 'roadmap'
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: 'https://maps.google.com/mapfiles/kml/' + location.type,
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://unpkg.com/#google/markerclustererplus#4.0.1/images/m',
minimumClusterSize: 2,
maxZoom: 4,
zoomOnClick: false
});
google.maps.event.addDomListener(document.getElementById('Backlog'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Breached'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Active'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Scheduled'), 'click', clickListener);
function clickListener() {
var typeId = this.id;
var type;
for (var i = 0; i < iconMapping.length; i++) {
if (iconMapping[i].state == typeId)
type = iconMapping[i].icon;
}
var markers = markerCluster.getMarkers();
for (var i = 0; i < markers.length; i++) {
if (markers[i].getIcon().includes(type)) {
markers[i].setVisible(this.checked);
}
}
}
}
var iconMapping = [{
icon: 'ylw-square-lv.png',
state: 'Backlog'
},
{
icon: 'blu-square-lv.png',
state: 'Active'
}
];
var locations = [{
lat: 53.750503,
lng: -2.429168,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 75199925"
}, {
lat: 51.290162,
lng: -0.833112,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 76669845"
}, {
lat: 51.301737,
lng: 0.051969,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 75199930"
}, {
lat: 50.525378,
lng: -3.594341,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78875603"
}, {
lat: 51.581895,
lng: -0.724800,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78581052"
}, {
lat: 50.391133,
lng: -4.072097,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78106941"
}, {
lat: 51.318527,
lng: -1.021035,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78396115"
}, {
lat: 50.443925,
lng: -3.561630,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78875582"
}, {
lat: 53.625107,
lng: -2.337432,
type: '/paddle/blu-square-lv.png',
state: 'Active',
info: "<strong>Order ID:</strong> 80444510"
}, {
lat: 52.432582,
lng: -2.026563,
type: '/paddle/blu-square-lv.png',
state: 'Active',
info: "<strong>Order ID:</strong> 80423141"
}]
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 90%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://unpkg.com/#google/markerclustererplus#4.0.1/dist/markerclustererplus.min.js"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<input type="checkbox" name="state" id="Backlog" checked> Backlog
<input type="checkbox" name="state" id="Breached" checked> Breached
<input type="checkbox" name="state" id="Active" checked> Active
<input type="checkbox" name="state" id="Scheduled" checked> Scheduled
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async></script>
</body>
</html>
If you want the clusters to reflect the number of visible markers, you need to change the code to update the markers array in the MarkerClusterer:
function clickListener() {
var typeId = this.id;
var type;
var visibleMarkers = [];
for (var i=0; i<iconMapping.length;i++) {
if (iconMapping[i].state==typeId)
type = iconMapping[i].icon;
}
for (var i=0; i<markers.length; i++) {
if (markers[i].getIcon().includes(type)) {
markers[i].setVisible(this.checked);
}
if (markers[i].getVisible())
visibleMarkers.push(markers[i]);
}
markerCluster.clearMarkers();
markerCluster.addMarkers(visibleMarkers);
}
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {
lat: 54.3266311,
lng: -2.7585563
},
mapTypeId: 'roadmap'
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: 'https://maps.google.com/mapfiles/kml/' + location.type,
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://unpkg.com/#google/markerclustererplus#4.0.1/images/m',
minimumClusterSize: 2,
maxZoom: 4,
zoomOnClick: false
});
google.maps.event.addDomListener(document.getElementById('Backlog'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Breached'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Active'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Scheduled'), 'click', clickListener);
function clickListener() {
var typeId = this.id;
var type;
var visibleMarkers = [];
for (var i = 0; i < iconMapping.length; i++) {
if (iconMapping[i].state == typeId)
type = iconMapping[i].icon;
}
console.log("click type=" + type)
for (var i = 0; i < markers.length; i++) {
console.log("markers[" + i + "] icon=" + markers[i].getIcon() + " map=" + markers[i].getMap() + "visible=" + markers[i].getVisible());
if (markers[i].getIcon().includes(type)) {
markers[i].setVisible(this.checked);
console.log("markers[" + i + "] map=" + markers[i].getMap() + " visible=" + markers[i].getVisible())
}
if (markers[i].getVisible())
visibleMarkers.push(markers[i]);
}
markerCluster.clearMarkers();
console.log("after clear:" + markerCluster.getMarkers().length)
markerCluster.addMarkers(visibleMarkers);
console.log("after add:" + markerCluster.getMarkers().length)
}
}
var iconMapping = [{
icon: 'ylw-square-lv.png',
state: 'Backlog'
},
{
icon: 'blu-square-lv.png',
state: 'Active'
}
];
var locations = [{
lat: 53.750503,
lng: -2.429168,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 75199925"
}, {
lat: 51.290162,
lng: -0.833112,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 76669845"
}, {
lat: 51.301737,
lng: 0.051969,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 75199930"
}, {
lat: 50.525378,
lng: -3.594341,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78875603"
}, {
lat: 51.581895,
lng: -0.724800,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78581052"
}, {
lat: 50.391133,
lng: -4.072097,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78106941"
}, {
lat: 51.318527,
lng: -1.021035,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78396115"
}, {
lat: 50.443925,
lng: -3.561630,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78875582"
}, {
lat: 53.625107,
lng: -2.337432,
type: '/paddle/blu-square-lv.png',
state: 'Active',
info: "<strong>Order ID:</strong> 80444510"
}, {
lat: 52.432582,
lng: -2.026563,
type: '/paddle/blu-square-lv.png',
state: 'Active',
info: "<strong>Order ID:</strong> 80423141"
}]
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 90%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://unpkg.com/#google/markerclustererplus#4.0.1/dist/markerclustererplus.min.js"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<input type="checkbox" name="state" id="Backlog" checked> Backlog
<input type="checkbox" name="state" id="Breached" checked> Breached
<input type="checkbox" name="state" id="Active" checked> Active
<input type="checkbox" name="state" id="Scheduled" checked> Scheduled
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&channel=2" async></script>
</body>
</html>

You can use the setVisible function in marker class like this:
for (var i in markersToHide) {
markersToHide[i].setVisible(true);
}
// if markers are inside a cluster
markerCluster.repaint();

Using dropDown menu to assign values to variables with knockout

My goal is to use an if statement to give a value from another variable on my code.
HTML
<div id="countryContainer">
<div class="label">
Country:
</div>
<select id="countryDropDown"
data-bind="options: availableCountries,
optionsText: 'countryName',
value: selectedCountry">
</select>
</div>
Javascript
var mxLocations = [
{title: 'Monterrey', location: {lat: 25.6475262, lng: -100.4524278 }},
{title: 'Tulum, Quintana Roo', location: {lat: 20.2114185, lng: -87.4653502 }},
{title: 'Tijuana', location: {lat: 32.5335808, lng: -117.1236801 }},
{title: 'Guadalajara', location: {lat: 20.676856, lng: -103.344773 }}
];
var usLocations = [
{title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }},
{title: 'Venice Beach', location: {lat: 33.9799948, lng: -118.478614 }},
{title: 'Miami', location: {lat: 25.7825453, lng: -80.2994983 }},
{title: 'Wichita', location: {lat: 37.6647979, lng: -97.5837763 }}
];
var home = [
{title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }}
];
var allLocations = (mxLocations.concat(usLocations)).concat(home);
var locations = ""
function getData(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
alert(this.value);
}
// Knockout Constructor
var Country = function(name) {
this.countryName = ko.observable(name);
};
var viewModel = {
availableCountries : ko.observableArray([
new Country("All Locations"),
new Country("Home"),
new Country("Mexico"),
new Country("USA")
]),
selectedCountry : ko.observable() // Nothing selected by default
};
ko.applyBindings(viewModel);
This is what I want to accomplish, if a value from the dropDown menu is selected I want to give the value of a variavle to another variable
function locations() {
if (dropDownValue == "All Locations") {
var locations = allLocations;
} else if (dropDownValue == "Home") {
var locations = home;
} else if (dropDownValue == "Mexico") {
var locations = mxLocations;
} else if (dropDownValue == "USA") {
var locations = usLocations;
I've been looking in all over the place to accomplish this with no result I hope you can address me to the right dirrection

You can subscribe to the selectedCountry observable. The callback function passed as a parameter to the subscribe will be called every time selectedCountry changes.
Here's a working snippet:
var mxLocations = [
{title: 'Monterrey', location: {lat: 25.6475262, lng: -100.4524278 }},
{title: 'Tulum, Quintana Roo', location: {lat: 20.2114185, lng: -87.4653502 }},
{title: 'Tijuana', location: {lat: 32.5335808, lng: -117.1236801 }},
{title: 'Guadalajara', location: {lat: 20.676856, lng: -103.344773 }}
];
var usLocations = [
{title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }},
{title: 'Venice Beach', location: {lat: 33.9799948, lng: -118.478614 }},
{title: 'Miami', location: {lat: 25.7825453, lng: -80.2994983 }},
{title: 'Wichita', location: {lat: 37.6647979, lng: -97.5837763 }}
];
var home = [
{title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }}
];
var allLocations = (mxLocations.concat(usLocations)).concat(home);
var locations = ""
var Country = function(name) {
this.countryName = ko.observable(name);
};
var viewModel = {
availableCountries: ko.observableArray([
new Country("All Locations"),
new Country("Home"),
new Country("Mexico"),
new Country("USA")
]),
selectedCountry: ko.observable()
};
viewModel.selectedCountry.subscribe(function(selectedValue) {
if (selectedValue.countryName() == "All Locations") {
locations = allLocations;
} else if (selectedValue.countryName() == "Home") {
locations = home;
} else if (selectedValue.countryName() == "Mexico") {
locations = mxLocations;
} else if (selectedValue.countryName() == "USA") {
locations = usLocations;
}
console.log(locations);
});
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="label">
Country:
</div>
<select id="countryDropDown" data-bind="options: availableCountries,
optionsText: 'countryName',
value: selectedCountry">
</select>
Click on Run code snippet to test it out.

AngularJS, NgMap and GoogleMaps Api (infowindow function error)

I'm going to initalize infowindows (for google map markers) through angular controller (i'm using ng-map module)
NgMap.getMap().then (map) ->
$scope.map = map
for marker in markers
latLng = new (google.maps.LatLng)(marker.latitude, marker.longitude)
#initialize infoWindows through google map api, not ng-map module
contentString = 'is an example string'
infoWindow = new (google.maps.InfoWindow)(content: contentString)
$scope.dynMarkers.push new (google.maps.Marker)(position: latLng)
marker.addListener 'click', ->
infoWindow.open map, marker
$scope.markerClusterer = new MarkerClusterer(map,$scope.dynMarkers, {})
I have an error in console:
marker.addListener is not a function
I can't use an ng-map 'infowindow' DOM element in my view.
What's wrong?

marker object needs to be of google.maps.Marker type, try to replace:
$scope.dynMarkers.push new (google.maps.Marker)(position: latLng)
marker.addListener 'click', ->
infoWindow.open map, marker
with
markerObject = new (google.maps.Marker)(position: latLng) #<-Marker object
$scope.dynMarkers.push markerObject
markerObject.addListener 'click', ->
infoWindow.open map, markerObject
Example
angular.module('mapApp', ['ngMap'])
.controller('mapController', function ($scope, NgMap) {
NgMap.getMap().then(function (map) {
$scope.map = map;
$scope.dynMarkers = [];
$scope.markers.forEach(function (marker) {
var latLng = new google.maps.LatLng(marker.latitude, marker.longitude);
var contentString = 'is an example string'
var infoWindow = new (google.maps.InfoWindow)({ content: contentString });
var dynMarker = new google.maps.Marker({ position: latLng });
$scope.dynMarkers.push(dynMarker);
google.maps.event.addListener(dynMarker, 'click', function () {
infoWindow.open(map,dynMarker);
});
});
var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
$scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, mcOptions)
});
$scope.markers = [
{ id: 1, name: 'Oslo', latitude: 59.923043, longitude: 10.752839 },
{ id: 2, name: 'Stockholm', latitude: 59.339025, longitude: 18.065818 },
{ id: 3, name: 'Copenhagen', latitude: 55.675507, longitude: 12.574227 },
{ id: 4, name: 'Berlin', latitude: 52.521248, longitude: 13.399038 },
{ id: 5, name: 'Paris', latitude: 48.856127, longitude: 2.346525 }
];
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
<ng-map default-style="true" zoom="3" center="59.339025, 18.065818">
</ng-map>
</div>

JavaScript - leaflet, adding a bunch of markers

Let's say I have a bunch of markers (over 100) I want to add from this:
module.exports = [
{ value: 'Varrock', lng: 22.5, lat: -15.52249812756166, popular: 1 },
{ value: 'Lumbridge', lng: 25.9661865234375, lat: -43.644025847699496, popular: 1 },
{ value: 'Monastery', lng: -4.0924072265625, lat: -5.714379819235291 },
{ value: 'Edgeville', lng: 2.4884033203125, lat: -6.0094592380595495, popular: 1 },
{ value: 'Varrock Palace', lng: 22.412109375, lat: -6.882800241767556 },
{ value: 'Digsite', lng: 46.043701171875, lat: -17.266727823520508 },
{ value: 'River Salve', lng: 54.931640625, lat: -14.083301314706778 },
{ value: 'Morytania', lng: 64.610595703125, lat: -13.501814172428656 },
{ value: 'Mort Myre Swamp', lng: 59.820556640625, lat: -22.740723091194727 }
];
It uses browserify to get it. So, I do this:
var locations = require('./locations');
What would be the best way to add all of those into LayerGroup()? I mean, because doing var fairy = L.layerGroup([One, Two, Three...]); by hand would get tiresome.
So how would I go about adding all of those markers into a new layer (so I can toggle them on/off)

How about adding an empty L.LayerGroup, looping over your array and adding them to that layer?
var locations = [];
var layer = L.layerGroup().addTo(map);
locations.forEach(function (location) {
L.marker([location.lat, location.lng])
.bindPopup(location.value)
.addTo(layer);
});
Working example on Plunker: http://plnkr.co/edit/Q0DGqs?p=preview

Load content with URL update and default content

I have a jQuery plugin that loads content into a certain div. Ignore the drawmap function at the beginning. It only serves in one of the pages. I'm trying to load content into the div while updating the url (not redirecting). For example, if I click on About Us the url will show: calstateautoparts.com/beta/aboutus.html. If I click on contact us the url will show calstateautoparts.com/beta/contactus.html.
Also, I would like to have the plugin load a page in the div by default, home.html. How do I make both of these changes in my code?
You can see the live site at: http://calstateautoparts.com/beta
<script type="text/javascript">
jQuery(function($){
function drawmap(){
new Maplace({
locations: [
{
lat: 33.8583,
lon: -117.8678,
title: 'Anaheim',
html: [
'<h3>Anaheim</h3>',
'<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
].join(''),
zoom: 8
},
{
lat: 34.2358,
lon: -118.5739,
title: 'Chatsworth',
html: [
'<h3>Chatsworth</h3>',
'<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
].join(''),
zoom: 8
},
{
lat: 32.8142,
lon: -117.1247,
title: 'San Diego',
html: [
'<h3>San Diego</h3>',
'<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.9137,
lon: -120.4632,
title: 'Santa Maria',
html: [
'<h3>Santa Maria</h3>',
'<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.5011,
lon: -117.3279,
title: 'Victorville',
html: [
'<h3>Victorville</h3>',
'<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
].join(''),
zoom: 8
}
,
{
lat: 36.1605,
lon: -115.1050,
title: 'Las Vegas',
html: [
'<h3>Las Vegas</h3>',
'<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
].join(''),
zoom: 8
}
,
{
lat: 33.1677,
lon: -117.2202,
title: 'Vista',
html: [
'<h3>Vista</h3>',
'<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
].join(''),
zoom: 8
}
,
{
lat: 33.6224,
lon: -117.7194,
title: 'Laguna Hills',
html: [
'<h3>Laguna Hills</h3>',
'<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.4245,
lon: -118.4998,
title: 'Santa Clarita',
html: [
'<h3>Santa Clarita</h3>',
'<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
].join(''),
zoom: 8
}
],
map_div: '#gmap-list',
controls_type: 'list',
controls_title: 'Choose a location:'
}).Load();
}
$('.menuitem').click(function(e){
$('#contentarea').load(this.href, $(this).data('loadfunc') || null);
e.preventDefault();
});
$('#contactus').data({loadfunc: drawmap});
});
</script>

Categories