for getting maps in maps in ionic project follow steps in
this post
now lets see
1. how to center the map to your screen
2. place markers of different colors
3. increase bounds of your map
4. Show window/message on click of marker
1. Centering the map to current location:
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
});
here getCurrentPositions return the lattitude (lat) and longitude (lon) of my current place.
i will use it in my map options to center it. highlighted above line will set my current location to center my map.
2&3. Place Markers:
lets say i want to place markers in my below lat, lons
var latlons = [{lat:"12.9450362",lon:"77.6970354",title:"msg1"},{lat:"12.9550364",lon:"77.6890356",title:"msg2"},{lat:"12.9950366",lon:"77.6800358",title:"msg3"}];
create a pin to show the marker:
var RedPinColor = "FE7569";
var RedPinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + RedPinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var bounds = new google.maps.LatLngBounds(); //for increase/decrease zoom
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.long);
var marker = new google.maps.Marker({
position: myLatlng,
map: $scope.map,
title: data.title,
icon:RedPinImage,
shadow:pinShadow
});
bounds.extend(myLatlng);
$scope.fitBounds(bounds);
}
i am adding bounds which will help me in increase/decrese zoom of my map according to the markers i am adding.
the pin Image can be changed as you need, below are 2 ex:
var
GreenPinColor = "69fe75";//"FE7569";
var
YellowPinColor = "FFFF00";
var
RedPinColor = "FE7569";
var
RedPinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + RedPinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var
YellowPinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + YellowPinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var
GreenPinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + GreenPinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var
pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
Display window/message on click of markers:
google maps offers a InfoWindow to display message on click of markers created above.
the below line create a infowindow.
var infoWindow = new google.maps.InfoWindow();
now need to bind to click event of marker. let see how to do it in a loop (as most of us need to do in looping always)
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.long);
var marker = new google.maps.Marker({
position: myLatlng,
map: $scope.map,
title: data.title,
icon:RedPinImage,
shadow:pinShadow
});
bounds.extend(myLatlng);
//Attach click event to the marker.
(function (marker, data) {
var infoWindowContent = "<div style = 'width:200px;min-height:40px'>"+"<p>" + data.DisplayName + "</p>"
+ "<button ng-click="+"\""+"MarkerClick('"+data.SensorName+"')"+"\""+">"+"Schedule Pick"+"</button>"+"</div>";
console.log(infoWindowContent);
var compiled = $compile(infoWindowContent)($scope);
// console.log(compiled["body"]);
google.maps.event.addListener(marker, "click", function (e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent(compiled[0]);
infoWindow.open($scope.map, marker);
});
})(marker, data);
$scope.map.fitBounds(bounds);
}
});
after a marker is created, using a function and creating a content to be displayed on its click: infoWindwContent
as angular restricts direct html binding need to compile it before attaching it to my window using
$compile service. sometimes if the html is unsafe you may need to use
$sce service to bind unsafe html.
use setContent to set create content info window
open actually assigns the map and marker to which this infowindow to be attached
