I have a custom set of icons I'm setting various pins too. When the mouse hovers over them I'd like to bring them to the front and change the style to a different icon.
I use this code to create the pin. OnHover I see the new push pin and on mouseout it returns to how it was. However, it has transparent areas and I can see parts of the non-hover pushpin below it when hovering.
For bringing it to the forefront have tried changing the zIndex value and as far as I can tell it does nothing.
Do I need to refresh the map or something?
Feels like there is something I'm missing.
function createImagePin(location, obj)
{
var smallPin = getSmallPin(obj);
var pin = new Microsoft.Maps.Pushpin(location, {
icon: smallPin.data,
visible: true,
anchor: new Microsoft.Maps.Point(smallPin.width / 2, smallPin.height / 2) //Align center of pushpin with location.
});
pin.dataTarget = obj;
Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e)
{
if(e.targetType === 'pushpin')
{
var largePin = getLargePin(e.target.dataTarget);
e.target.setOptions({ icon: largePin.data, anchor: new Microsoft.Maps.Point(largePin.width/2,largePin.height/2) });
}
});
Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e)
{
if (e.targetType === 'pushpin')
{
var smallPin = getSmallPin(e.target.dataTarget);
e.target.setOptions({ icon: smallPin.data, anchor: new Microsoft.Maps.Point(smallPin.width/2,smallPin.height/2) });
}
});
return pin;
}
Currently shapes do no support zIndexing due to performance issues, but there are plans to add support for this. You can however use two layers for your data, the first to store your main data, and the second to display the hovered data. Below is a code sample that demonstrates hovering a pushpin, changing its style and displaying it above all other shapes on the map. When you mouse out the style goes back to what it was and the pushpin goes back to the main layer.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
<script type='text/javascript'>
var map;
var defaultColor = 'blue';
var hoverColor = 'red';
var mouseDownColor = 'purple';
function GetMap()
{
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'YourBingMapsKey'
});
var layer = new Microsoft.Maps.Layer();
map.layers.insert(layer);
var hoverLayer = new Microsoft.Maps.Layer();
map.layers.insert(hoverLayer);
//Add some random pushpins to fill the map and cover our hoverable main pushpin.
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(300, map.getBounds());
layer.add(pushpins);
//Create our hoverable pushpin.
var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
color: defaultColor
});
layer.add(pin);
Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {
e.target.setOptions({ color: hoverColor });
//Move pin to hover layer.
layer.remove(pin);
hoverLayer.add(pin);
});
Microsoft.Maps.Events.addHandler(pin, 'mousedown', function (e) {
e.target.setOptions({ color: mouseDownColor });
});
Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e) {
e.target.setOptions({ color: defaultColor });
//Move pin to main layer.
hoverLayer.remove(pin);
layer.add(pin);
});
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
You can try this code sample out here: http://bingmapsv8samples.azurewebsites.net/#Pushpin_HoverStyle
Related
In the bingmaps documentation, you can add custom actions to the infobox. I would like to know if there's a similar way to program the default closeButton?
Ideally, I would like to be able to do something like this:
const infobox = new Microsoft.Maps.Infobox(selectedTipCoordinates, {
title: selectedTip.title,
description: selectedTip.description,
closeButton: () => console.log('hello')
});
Unfortunately close event handler could not be customized via InfoboxOptions object, so you could consider either to implement a custom HTML Infobox or override info window click handler. The following example demonstrates how to keep info window opened once close button is clicked and add a custom action:
Microsoft.Maps.Events.addHandler(infobox, 'click', handleClickInfoBox);
function handleClickInfoBox(e){
var isCloseAction = e.originalEvent.target.className == "infobox-close-img";
if(isCloseAction){
//keep info window open..
e.target.setOptions({visible: true});
//apply some custom actions..
console.log("Close button clicked");
}
}
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
center: new Microsoft.Maps.Location(47.60357, -122.32945)
});
var infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
title: "Title",
description: "Description",
actions: [
{
label: "Handler1",
eventHandler: function() {
console.log("Handler1");
}
},
{
label: "Handler2",
eventHandler: function() {
console.log("Handler2");
}
},
{
label: "Handler3",
eventHandler: function() {
console.log("Handler3");
}
}
]
});
infobox.setMap(map);
Microsoft.Maps.Events.addHandler(infobox, 'click', handleClickInfoBox);
}
function handleClickInfoBox(e){
var isCloseAction = e.originalEvent.target.className == "infobox-close-img";
if(isCloseAction){
//keep info window open..
e.target.setOptions({visible: true});
//apply some custom actions..
console.log("Close button clicked");
}
}
body{
margin:0;
padding:0;
overflow:hidden;
}
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=&callback=loadMapScenario' async defer></script>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
No, I don't think there's a way to wire the behavior of default close button differently. That said, you can approximate the desired outcome with a little more work: creating a custom infobox with the same style and then you'll have 100% control:
e.g. (notice the onClick handler on the close button div):
var center = map.getCenter();
var infoboxTemplate = '<div class="Infobox" style=""><a class="infobox-close" href="javascript:void(0)" onClick="function test(){ alert(\'test!\'); } test(); return false;" style=""><img class="infobox-close-img" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE0cHgiIHdpZHRoPSIxNHB4IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPjxwYXRoIGQ9Ik03LDBDMy4xMzQsMCwwLDMuMTM0LDAsN2MwLDMuODY3LDMuMTM0LDcsNyw3YzMuODY3LDAsNy0zLjEzMyw3LTdDMTQsMy4xMzQsMTAuODY3LDAsNywweiBNMTAuNSw5LjVsLTEsMUw3LDhsLTIuNSwyLjVsLTEtMUw2LDdMMy41LDQuNWwxLTFMNyw2bDIuNS0yLjVsMSwxTDgsN0wxMC41LDkuNXoiLz48L3N2Zz4=" alt="close infobox"></a><div class="infobox-body" style="max-width: 256px; max-height: 126px; width: 125px;"><div class="infobox-title" >{title}</div><div class="infobox-info" style=""><div>{description}</div></div><div class="infobox-actions" style="display: none;"><ul class="infobox-actions-list"><div></div></ul></div></div><div class="infobox-stalk" style="top: 73.8px; left: 55.5px;"></div></div>';
var infobox = new Microsoft.Maps.Infobox(center, {
htmlContent: infoboxTemplate.replace('{title}', 'myTitle').replace('{description}', 'myDescription'),
offset: new Microsoft.Maps.Point(-64, 16)
});
I'm implementing google map into my ionic app, and I have a script in my index.html, which, will only allow the map works in the index.html.
But I need my map in my templates file route.html instead, so I believe I should move the script in the index.html to the specific controller.js file, but things here are written in $scope style, can anyone tell me how could I wrote the style into $scope style?
And why actually things won't works in the route.html as the same code is used?
<div id="map"></div>
Here's my script in my index.html:
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</script>
And my controller in the controller.js
.controller('RouteCtrl', function($scope, $ionicLoading) {
$scope.mapCreated = function(map) {
$scope.map = map;
};
$scope.centerOnMe = function () {
console.log("Centering");
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function (pos) {
console.log('Got pos', pos);
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function (error) {
alert('Unable to get location: ' + error.message);
});
}
})
There 2 ways to solve your problem :
Change your script to angular method in controller or create a service , like:
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: "Here I am!"
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
Change it to jquery in controller, but it not recommend because it will break to purpose of angular usage in ionic:
var map = new google.maps.Map($("#map"), {
zoom: 4,
center: uluru
});
Need to display marker bunch(cluster) title on bing map.
And I want to display tooltip#hover and popup#click with cluster is there any option to display with map.
I have tried usign following code (but there is no tooltip and popup on click):
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key'
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);
thanks
You can use the infobox class to do this. As luck would have it I was just putting together sample to do this. Here you go:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
<script type='text/javascript'>
var map, infobox, tooltip;
var tooltipTemplate = '<div style="background-color:white;height:20px;width:150px;padding:5px;text-align:center"><b>{title}</b></div>';
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: Your Bing Maps Key'
});
//Create a second infobox to use as a tooltip when hovering.
tooltip = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false,
showPointer: false,
showCloseButton: false,
offset: new Microsoft.Maps.Point(-75, 10)
});
tooltip.setMap(map);
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false
});
//Assign the infobox to a map instance.
infobox.setMap(map);
//Create random locations in the map bounds.
var randomLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, map.getBounds());
for (var i = 0; i < randomLocations.length; i++) {
var pin = new Microsoft.Maps.Pushpin(randomLocations[i]);
//Store some metadata with the pushpin.
pin.metadata = {
title: 'Pin ' + i,
description: 'Discription for pin' + i
};
//Add a click event handler to the pushpin.
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
Microsoft.Maps.Events.addHandler(pin, 'mouseover', pushpinHovered);
Microsoft.Maps.Events.addHandler(pin, 'mouseout', closeTooltip);
//Add pushpin to the map.
map.entities.push(pin);
}
}
function pushpinClicked(e) {
//Hide the tooltip
closeTooltip();
//Make sure the infobox has metadata to display.
if (e.target.metadata) {
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
}
function pushpinHovered(e) {
//Hide the infobox
infobox.setOptions({ visible: false });
//Make sure the infobox has metadata to display.
if (e.target.metadata) {
//Set the infobox options with the metadata of the pushpin.
tooltip.setOptions({
location: e.target.getLocation(),
htmlContent: tooltipTemplate.replace('{title}', e.target.metadata.title),
visible: true
});
}
}
function closeTooltip() {
tooltip.setOptions({
htmlContent: ' ',
visible: false
});
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
I am creating an iPhone application in which i need to fetch the latitude longitude from gps.Now i am calling update-location delegate method and adding new location to the array after that i need to show all latitude longitude(locations ) on goggle map and the route between all locations.
Please help me out in showing the route.
Thanks in advance
Here is how you might do it with the GoogleMaps javascript api.
<style>
#map_canvas {
height: 190px;
width: 300px;
margin-top: 0.6em;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<div id="map_canvas" ></div>
<script language="javascript" type="text/javascript">
var latitude = 44.056389;
var longitude = -121.308056;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(latitude,longitude),
zoom: 9,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
// Create a draggable marker which will later on be binded to a
// Circle overlay.
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude,longitude),
draggable: true
});
// Add a Circle overlay to the map.
var circle = new google.maps.Circle({
strokeColor: "#0000FF",
strokeOpacity: 0.4,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.20,
map: map,
radius: 16000 // meters
});
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(marker, 'dragend', function() {
var location = marker.getPosition();
latitude = location.lat();
longitude = location.lng();
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var location = place.geometry.location;
map.setCenter(location);
map.setZoom(9); // Why 9? Because it looks good.
marker.setPosition(location);
latitude = location.lat();
longitude = location.lng();
});
}
</script>
I'm using Google Maps v3.
I've already suppressed markers to display my own on the map itself.
I want to modify the ones displayed in the directions div but the images have no IDs or Classes
<img jsvalues=".src:markerIconPaths[$waypointIndex]" jstcache="13" src="http://maps.gstatic.com/intl/en_us/mapfiles/icon_greenA.png">
Is there some other way to modify the source, or do I need to roll my own directions renderer?
I was also having an issue with the markers in the directions output. There was no way to replace the markers without some extremely cumbersome js, which then had to include workarounds for the turn-by-turn directions, etc.
A simple way to do it is by css:
The A line is a table:
<table id="adp-placemark" class="adp-placemark" jstcache="0">
and B line is:
<table class="adp-placemark" jstcache="0">
So the following css will change the markers:
#adp-placemark img, .adp-placemark img {
display:none;
}
#adp-placemark {
font-weight: bold;
padding: 10px 10px 10px 30px;
background: white url(../images/map_icons/number_1.png) no-repeat left center;
}
.adp-placemark {
font-weight: bold;
padding: 10px 10px 10px 30px;
background: white url(../images/map_icons/number_2.png) no-repeat left center;
}
I also had a problem with access to marker "inside" directions render and didn't find any solution that would be good enough for me... So I made it by myself and created a little JavaScript class. I hope it will be helpful.
It uses only API documented methods and properties.
I'm looking forward for any comments and code improvements.
My code at: http://jsfiddle.net/mzwjW/6/
Edit: Just copied the whole JavaScript code here.
var map;
var custom;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(52.87916, 18.32910),
mapTypeId: 'terrain'
};
var markers = [];
$(function() {
map = new google.maps.Map($('#map')[0], myOptions);
custom = new customDirectionsRenderer(new google.maps.LatLng(50.87916, 16.32910), new google.maps.LatLng(52.87916, 16.32910), map);
//you have access to marker :)
custom.startMarker.setTitle('POLAND!!');
});
function customDirectionsRenderer(startPoint, endPoint, map) {
//!!!!! reference to our class
var that = this;
this.directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
suppressMarkers: true,
map: map
});
google.maps.event.addListener(this.directionsDisplay, 'directions_changed', function () {
checkWaypoints();
});
this.directionsService = new google.maps.DirectionsService();
var draggedMarker;
var waypointsMarkers = new Array();
this.map = map;
this.polyline = '';
this.polylinePoints = [];
//<-- create Start and Stop Markers
this.startMarker = new google.maps.Marker({
position: startPoint,
title: 'Start',
map: map,
draggable: true,
optimized: false
});
this.endMarker = new google.maps.Marker({
position: endPoint,
title: 'End',
map: map,
draggable: true,
optimized: false
});
//-->
//<-- add events listeners to Start/Stop Markers
google.maps.event.addListener(this.startMarker, 'dragend', dragEnd);
google.maps.event.addListener(this.startMarker, 'dragstart', dragStart);
google.maps.event.addListener(this.startMarker, 'drag', drag);
google.maps.event.addListener(this.endMarker, 'dragend', dragEnd);
google.maps.event.addListener(this.endMarker, 'dragstart', dragStart);
google.maps.event.addListener(this.endMarker, 'drag', drag);
//-->
//<-- update directionsRenderer true - snap markers to nearest streets
update(true);
//-->
//<--privates
////<-- event handlers
function dragStart() {
draggedMarker = this;
}
function dragEnd() {
clearTimeout(this.timeout);
update(true);
}
function drag() {
if (this.timeout !== undefined) {
return;
}
this.timeout = setTimeout(function () { update(false); }, 200);
}
////-->
////<-- create draggable markers for Waypoints from given array of latlng objects
function createWaypointsMarkers(wpoints) {
$.each(waypointsMarkers, function (idx, obj) {
obj.setMap(null);
});
waypointsMarkers = [];
$.each(wpoints, function (idx, obj) {
var marker = new google.maps.Marker({
position: obj,
map: that.map,
draggable: true,
optimized: false,
title: idx.toString()
});
waypointsMarkers.push(marker);
google.maps.event.addListener(marker, 'dragend', dragEnd);
google.maps.event.addListener(marker, 'dragstart', dragStart);
google.maps.event.addListener(marker, 'drag', drag);
});
}
////-->
////--> check if new waypoint was created
function checkWaypoints() {
if (that.directionsDisplay.getDirections() !== undefined) {
if (waypointsMarkers.length !=
that.directionsDisplay.getDirections().routes[0].legs[0].via_waypoints.length) {
createWaypointsMarkers(that.directionsDisplay.getDirections().routes[0].legs[0].via_waypoints);
}
}
}
////-->
////--> Update directionsRenderer when move or drop marker
////bool setMarkersPositions - snap markers to nearest streets?
function update(setMarkersPositions) {
if (draggedMarker !== undefined) {
draggedMarker.timeout = undefined;
}
that.directionsDisplay.preserveViewport = true;
checkWaypoints();
var waypoints = [];
$.each(waypointsMarkers, function (idx, obj) {
waypoints.push({ location: obj.getPosition(), stopover: false });
});
var request = {
origin: that.startMarker.getPosition(),
destination: that.endMarker.getPosition(),
waypoints: waypoints,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
that.directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
that.directionsDisplay.setDirections(response);
if (waypointsMarkers.length != response.routes[0].legs[0].via_waypoints.length) {
createWaypointsMarkers(response.routes[0].legs[0].via_waypoints);
}
if (setMarkersPositions) {
that.startMarker.setPosition(response.routes[0].legs[0].start_location);
that.endMarker.setPosition(response.routes[0].legs[0].end_location);
$.each(response.routes[0].legs[0].via_waypoints, function (idx, obj) {
waypointsMarkers[idx].setPosition(obj);
});
that.polyline = response.routes[0].overview_polyline.points;
that.polylinePoints = response.routes[0].overview_path;
}
}
});
}
////-->
//-->
}
customDirectionsRenderer.prototype = new google.maps.MVCObject();
YES !
very nice with css
#adp-placemark img,.adp-placemark img{display:none}
#adp-placemark{height:31px;background:#fff url(../img/marker_start.png) no-repeat left center}
#adp-placemark .adp-text,.adp-placemark .adp-text{height:31px;font-weight: bold;padding-left:29px}
.adp-placemark{background:#fff url(../img/marker_end.png) no-repeat left center}
with marker_start.png and marker_end.png 19px * 31px
I don't know ther is no solution in google map api v3
any way you also can manage this with jQuery too