如何自定义谷歌地图标记弹出窗口？

Question

I have a list of cities with latitude and longitude. In the map I am showing 5 markers with details. When I click the marker it's showing that particular city's details in the info window and everything is working properly.

Is it possible to edit the info window?

Expectation: When i click marker one dive should come in bottom of the page with that marker details and left,right arrow.

1.div should contain Chicago get(button to pass id value) This is the second best city in the world! Chicago'

2.if i click left arrow it should move to left side markers(based on that marker data should change in that div)

3.if i click right arrow it should move to right side markers(based on that marker data should change in that div)

  angular.module('mapsApp', []) .controller('MapCtrl', ['$scope', '$http', '$location', '$window', '$compile', function($scope, $http, $location, $window, $compile) { var cities = [{ id: '1', city: 'Toronto', desc: 'This is the best city in the world!', lat: 43.7000, long: -79.4000, icon:'http://labs.google.com/ridefinder/images/mm_20_purple.png' }, { id: '2', city: 'New York', desc: 'This city is aiiiiite!', lat: 40.6700, long: -73.9400, icon:'http://labs.google.com/ridefinder/images/mm_20_red.png' }, { id: '3', city: 'Chicago', desc: 'This is the second best city in the world!', lat: 41.8819, long: -87.6278, icon:'http://labs.google.com/ridefinder/images/mm_20_green.png' }, { id: '4', city: 'Los Angeles', desc: 'This city is live!', lat: 34.0500, long: -118.2500, icon:'http://labs.google.com/ridefinder/images/mm_20_blue.png' }, { id: '5', city: 'Las Vegas', desc: 'This city is live!', lat: 36.0800, long: -115.1522, icon:'http://labs.google.com/ridefinder/images/mm_20_yellow.png' }]; 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); $scope.markers = []; var infoWindow = new google.maps.InfoWindow(); var createMarker = function(info) { var marker = new google.maps.Marker({ map: $scope.map, position: new google.maps.LatLng(info.lat, info.long), title: info.city, icon: info.icon }); marker.content = '<div><h2>'+marker.title+'</h2><input type="button" value="get" ng-click="get(' + info.id + ')"/>' + '<div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div></div>'; google.maps.event.addListener( marker, 'click', (function(marker, $scope) { return function() { var compiled = $compile(marker.content)($scope); $scope.$apply(); infoWindow.setContent(compiled[0]); infoWindow.open($scope.map, marker); }; })(marker, $scope) ); $scope.markers.push(marker); } $scope.get = function(id) { console.log(id); //alert("from $scope.get id : "+id); } for (i = 0; i < cities.length; i++) { createMarker(cities[i]); } $scope.openInfoWindow = function(e, selectedMarker) { e.preventDefault(); google.maps.event.trigger(selectedMarker, 'click'); } $scope.clearMarkers = function() { for (var i = 0; i < $scope.markers.length; i++) { $scope.markers[i].setMap(null); } $scope.markers.length = 0; } $scope.filterMarkers = function() { //1.select filtered cities var filteredCities; var cityDesc = $scope.data.singleSelect; if (cityDesc == '0') { filteredCities = cities; } else { filteredCities = cities.filter(function(c) { if (c.desc == cityDesc) return c; }); } //2.update markers on map $scope.clearMarkers(); for (i = 0; i < filteredCities.length; i++) { createMarker(filteredCities[i]); } } }]); 

 #map { height: 420px; width: 600px; } .infoWindowContent { font-size: 14px !important; border-top: 1px solid #ccc; padding-top: 10px; } h2 { margin-bottom: 0; margin-top: 0; } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <div ng-app="mapsApp" ng-controller="MapCtrl"> <div id="map"></div> <br> <br> <label>Filter Marker </label> <br> <select name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers()"> <option value="0">all</option> <option value="This is the best city in the world!">This is the best city in the world!</option> <option value="This city is aiiiiite">This city is aiiiiite</option> <option value="This is the second best city in the world!">This is the second best city in the world!</option> <option value="This city is live!">This city is live!</option> </select> <br> <div id="class" ng-repeat="marker in markers | orderBy : 'title'"> <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a> </div> </div> 

Answer 1

You can add an html item directly into the marker variable:

var marker = new google.maps.Marker({
                    map: $scope.map,
                    position: new google.maps.LatLng(info.lat, info.long),
                    title: info.city,
                    icon: info.icon
                    html: <your html code here>
                });

Answer 2

You mean this:

 <html> <head> <style> #map { height: 420px; width: 600px; } .infoWindowContent { font-size: 14px !important; border-top: 1px solid #ccc; padding-top: 10px; } h2 { margin-bottom: 0; margin-top: 0; } .bar { width:200px; display:inline-block; overflow: auto; white-space: nowrap; margin:0px auto; border:1px red solid; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"> </script> <script> angular.module('mapsApp', []) .controller('MapCtrl', ['$scope', '$http', '$location', '$window', '$compile', function($scope, $http, $location, $window, $compile) { var cities = [{ id: '1', city: 'Toronto', desc: 'This is the best city in the world!', lat: 43.7000, long: -79.4000, icon:'http://labs.google.com/ridefinder/images/mm_20_purple.png' }, { id: '2', city: 'New York', desc: 'This city is aiiiiite!', lat: 40.6700, long: -73.9400, icon:'http://labs.google.com/ridefinder/images/mm_20_red.png' }, { id: '3', city: 'Chicago', desc: 'This is the second best city in the world!', lat: 41.8819, long: -87.6278, icon:'http://labs.google.com/ridefinder/images/mm_20_green.png' }, { id: '4', city: 'Los Angeles', desc: 'This city is live!', lat: 34.0500, long: -118.2500, icon:'http://labs.google.com/ridefinder/images/mm_20_blue.png' }, { id: '5', city: 'Las Vegas', desc: 'This city is live!', lat: 36.0800, long: -115.1522, icon:'http://labs.google.com/ridefinder/images/mm_20_yellow.png' }]; 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); $scope.markers = []; var infoWindow = new google.maps.InfoWindow(); var createMarker = function(info,i) { var marker = new google.maps.Marker({ map: $scope.map, position: new google.maps.LatLng(info.lat, info.long), title: info.city, icon: info.icon }); marker.content = "<div><h2>"+marker.title+"</h2><input type='button' value='get' ng-click='get(" + info.id + ")'/>" + "<div class='infoWindowContent'>" + info.desc + "</div><div class='infoWindowContent'>" + info.city + "</div><div class='bar'><div style='float: left;'><button ng-click='markerClick("+(i-1)+")'><< LEFT</button></div><div style='float: right;'><button ng-click='markerClick("+(i+1)+")'>RIGHT >></button></div></div></div>"; google.maps.event.addListener( marker, 'click', (function(marker, $scope) { return function() { var compiled = $compile(marker.content)($scope); // $scope.$apply(); infoWindow.setContent(compiled[0]); infoWindow.open($scope.map, marker); }; })(marker, $scope) ); $scope.markers.push(marker); } $scope.markerClick=function(i){ if(i===-1) i=4; if(i===5) i=0 console.log("in marker click"+i); google.maps.event.trigger( $scope.markers[i], 'click' ); } $scope.get = function(id) { console.log(id); //alert("from $scope.get id : "+id); } for (i = 0; i < cities.length; i++) { createMarker(cities[i],i); } $scope.openInfoWindow = function(e, selectedMarker) { e.preventDefault(); google.maps.event.trigger(selectedMarker, 'click'); } $scope.clearMarkers = function() { for (var i = 0; i < $scope.markers.length; i++) { $scope.markers[i].setMap(null); } $scope.markers.length = 0; } $scope.filterMarkers = function() { //1.select filtered cities var filteredCities; var cityDesc = $scope.data.singleSelect; if (cityDesc == '0') { filteredCities = cities; } else { filteredCities = cities.filter(function(c) { if (c.desc == cityDesc) return c; }); } //2.update markers on map $scope.clearMarkers(); for (i = 0; i < filteredCities.length; i++) { createMarker(filteredCities[i]); } } }]); </script> </head> <body> <div ng-app="mapsApp" ng-controller="MapCtrl"> <div id="map"></div> <br> <br> <label>Filter Marker </label> <br> <select name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers()"> <option value="0">all</option> <option value="This is the best city in the world!">This is the best city in the world!</option> <option value="This city is aiiiiite">This city is aiiiiite</option> <option value="This is the second best city in the world!">This is the second best city in the world!</option> <option value="This city is live!">This city is live!</option> </select> <br> <div id="class" ng-repeat="marker in markers | orderBy : 'title'"> <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a> </div> </div> </body> </html> 

I won't be able to help you out with styling and aligning buttons but I tried to put it close to your expectations.