javascript - how to show different icon for google map markers? -
i want show different marker icons in google map.i have enclosed code .here have different icons in markers1[7].i want show these icons in google map have added fiddle https://jsfiddle.net/h9selt22/7/ instead of default marker iconi need show dynamic marker icon
angular.module('myapp', []) .controller('mapctrl', [ '$scope', '$http', '$compile', function ($scope, $http, $compile) { //------------------------------------------------------------------------------------------------------------------------------------------------- $scope.find = function () { var gmarkers1 = []; var markers1 = []; var infowindow = new google.maps.infowindow({ content: '' }); // our markers markers1 = [ ['0', 'madivala', 12.914494, 77.560381, 'computer science,electronic system,communication thoery,english', 'as12', 'abi tech acc','http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/information_icon.svg'], ['1', 'majestic', 12.961229, 77.559281, 'electronic system,telecommunication,optical&fiber optics', 'as13', 'vell infotech','http://icons.iconarchive.com/icons/kyo-tux/aeon/256/sign-logoff-icon.png'], ['2', 'ecity', 12.92489905, 77.56070772, 'communication thoery,english,digital electronics,signal&systems', 'as14', 'vinoth coching center','http://icons.iconarchive.com/icons/artua/mac/512/intranet-icon.png'], ['3', 'jp nagar', 12.91660662, 77.52047465, 'digital electronics,signal&systems', 'as15', 'gpy tech archi','http://www.psdgraphics.com/file/upload-icon.jpg'] ]; /** * function init map */ function initialize() { var center = new google.maps.latlng(12.9667, 77.5667); var mapoptions = { zoom: 12, center: center, maptypeid: google.maps.maptypeid.terrain }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); (i = 0; < markers1.length; i++) { addmarker(markers1[i]); } } /** * function add marker map */ function addmarker(marker) { var category = marker[4]; var title = marker[1]; var pos = new google.maps.latlng(marker[2], marker[3]); var content = marker[1]; var fullcontent = marker.slice(1, 6).join(); var marker1 = new google.maps.marker({ title: title, position: pos, category: category, map: map }); gmarkers1.push(marker1); // marker click listener google.maps.event.addlistener(marker1, 'click', (function (marker1, idx, markers1) { return function () { console.log('gmarker 1 gets pushed'); var compiled = '<div><div>' + markers1[idx][0] + ' </div><div>' + markers1[idx][1] + ' </div><div>' + markers1[idx][2] + ' </div><div><button id="' + markers1[idx][5] + '">get</button></div></div>'; var infowindow = new google.maps.infowindow({ content: compiled }); infowindow.open(map, marker1); map.panto(this.getposition()); map.setzoom(15); } })(marker1, i, markers1)); } $(document.body).on('click', 'button', function () { console.log(this.id); }); /** * function filter markers category */ filtermarkers = function (category) { (i = 0; < markers1.length; i++) { marker = gmarkers1[i]; // if same category or category not picked if (marker.category.tolowercase().indexof(category.tolowercase()) > -1 || category.length === 0) { marker.setvisible(true); } // categories don't match else { marker.setvisible(false); } } } // init map initialize(); } }]); #map-canvas { width: 500px; height: 500px; }<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <div ng-app="myapp"> <div ng-controller="mapctrl" ng-init="find()"> <div id="map-canvas"></div> <select id="type" onchange="filtermarkers(this.value);"> <option value="">please select category</option> <option value="computer science">computer science</option> <option value="electronic system">electronic system</option> <option value="communication thoery">communication thoery</option> <option value="english">english</option> <option value="optical&fiber optics">optical&fiber optics</option> <option value="digital electronics">digital electronics</option> <option value="signal&systems">signal&systems</option> </select> </div> </div
you specify icon using marker object initializer
var marker = new google.maps.marker({ title: location[1], position: new google.maps.latlng(location[2], location[3]), category: location[4], map: $scope.map, //icon: location[7] //set icon }); or using google.maps.marker.seticon function:
var imageicon = { url: location[7], // marker 20 pixels wide 32 pixels high. size: new google.maps.size(32, 32), // origin image (0, 0). origin: new google.maps.point(0, 0), // anchor image base of flagpole @ (0, 32). anchor: new google.maps.point(0, 32) }; marker.seticon(imageicon); below provided modified example demonstrates how set marker icons
modified example
angular.module('myapp', []) .controller('mapctrl', [ '$scope', '$http', '$compile', function ($scope, $http, $compile) { /** * function filter locations category */ $scope.filtermarkers = function () { var category = $scope.selecteditem; (var = 0; < $scope.markers.length; i++) { var marker = $scope.markers[i]; // if same category or category not picked if (marker.category.tolowercase().indexof(category.tolowercase()) > -1 || category.length === 0) { marker.setvisible(true); } // categories don't match else { marker.setvisible(false); } } }; //------------------------------------------------------------------------------------------------------------------------------------------------- $scope.initmap = function () { $scope.markers = []; var infowindow = new google.maps.infowindow({ content: '' }); var locations = [ ['0', 'madivala', 12.914494, 77.560381, 'computer science,electronic system,communication thoery,english', 'as12', 'abi tech acc', 'http://icons.iconarchive.com/icons/martz90/hex/32/location-icon.png'], ['1', 'majestic', 12.961229, 77.559281, 'electronic system,telecommunication,optical&fiber optics', 'as13', 'vell infotech', 'http://icons.iconarchive.com/icons/graphicloads/100-flat/32/location-icon.png'], ['2', 'ecity', 12.92489905, 77.56070772, 'communication thoery,english,digital electronics,signal&systems', 'as14', 'vinoth coching center', 'http://icons.iconarchive.com/icons/graphicloads/seo-services/32/location-icon.png'], ['3', 'jp nagar', 12.91660662, 77.52047465, 'digital electronics,signal&systems', 'as15', 'gpy tech archi', 'http://icons.iconarchive.com/icons/graphicloads/transport/32/location-icon.png'] ]; /** * function init map */ function initialize() { var center = new google.maps.latlng(12.9667, 77.5667); var mapoptions = { zoom: 12, center: center, maptypeid: google.maps.maptypeid.terrain }; $scope.map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); (var = 0; < locations.length; i++) { addmarker(locations[i]); } } /** * function add marker map */ function addmarker(location) { var marker = new google.maps.marker({ title: location[1], position: new google.maps.latlng(location[2], location[3]), category: location[4], map: $scope.map, //icon: location[7] //set icon }); var imageicon = { url: location[7], // marker 20 pixels wide 32 pixels high. size: new google.maps.size(32, 32), // origin image (0, 0). //origin: new google.maps.point(0, 0), // anchor image base of flagpole @ (0, 32). //anchor: new google.maps.point(0, 32) }; marker.seticon(imageicon); $scope.markers.push(marker); // marker click listener google.maps.event.addlistener(marker, 'click', (function(){ var compiled = '<div><div>' + location[0] + ' </div><div>' + location[1] + ' </div><div>' + location[2] + ' </div><div><button id="' + location[5] + '">get</button></div></div>'; var infowindow = new google.maps.infowindow({ content: compiled }); infowindow.open($scope.map, marker); $scope.map.panto(this.getposition()); $scope.map.setzoom(15); })); } // init map initialize(); } }]);#map-canvas { width: 500px; height: 500px; } <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> <div ng-app="myapp"> <div ng-controller="mapctrl" ng-init="initmap()"> <div id="map-canvas"></div> <select id="type" ng-model="selecteditem" ng-change="filtermarkers()" > <option value="">please select category</option> <option value="computer science">computer science</option> <option value="electronic system">electronic system</option> <option value="communication thoery">communication thoery</option> <option value="english">english</option> <option value="optical&fiber optics">optical&fiber optics</option> <option value="digital electronics">digital electronics</option> <option value="signal&systems">signal&systems</option> </select> </div> </div>
Comments
Post a Comment