Rotating image / marker image on Google map V3 - javascript

How could I rotate an image (marker image) on a Google map V3?
There is an excellent example for V2 here, exactly doing what I need. But for GMap2! They do it with a rotating canvas.
Image rotating with JS / JQuery is frequently used, there are multiple answers about this. But how could I apply this to my maps image?
One mentioned approach is to have different images for different angles and to switch among them - this is NOT what I want. I do not like to have so many images, I want to rotate by code.
Remark: There are similar questions, but all for V2 and not V3 (as far I can tell). I need it for V3.

My js class for solving this problem is:
var RotateIcon = function(options){
this.options = options || {};
this.rImg = options.img || new Image();
this.rImg.src = this.rImg.src || this.options.url || '';
this.options.width = this.options.width || this.rImg.width || 52;
this.options.height = this.options.height || this.rImg.height || 60;
var canvas = document.createElement("canvas");
canvas.width = this.options.width;
canvas.height = this.options.height;
this.context = canvas.getContext("2d");
this.canvas = canvas;
};
RotateIcon.makeIcon = function(url) {
return new RotateIcon({url: url});
};
RotateIcon.prototype.setRotation = function(options){
var canvas = this.context,
angle = options.deg ? options.deg * Math.PI / 180:
options.rad,
centerX = this.options.width/2,
centerY = this.options.height/2;
canvas.clearRect(0, 0, this.options.width, this.options.height);
canvas.save();
canvas.translate(centerX, centerY);
canvas.rotate(angle);
canvas.translate(-centerX, -centerY);
canvas.drawImage(this.rImg, 0, 0);
canvas.restore();
return this;
};
RotateIcon.prototype.getUrl = function(){
return this.canvas.toDataURL('image/png');
};
Call it like this:
var marker = new google.maps.Marker({
icon: {
url: RotateIcon
.makeIcon(
'https://ru.gravatar.com/userimage/54712272/b8eb5f2d540a606f4a6c07c238a0bf40.png')
.setRotation({deg: 92})
.getUrl()
}})
See live example here http://jsfiddle.net/fe9grwdf/39/

I have found two extensions to the Google MAP V3: infobox.js and markerwithlabel.js
Both can handle an image DOM element as content, which in turn I can rotate via the jQuery image rotate plugin.
This even works without setting the marker's image again after rotation.
Edit: As of questions / comments below:
The extension for label is required, because it can handle other DOM elements. So I can add arbitrary HTML as label, in my particular case I add the image. And then I do rotate this image (child of the label) with the rotate plugin. So assign the image an id in order to easily access it. Actually I am using one label just for the image, and another for descriptive text.
Edit 2: Due to Stephan's comment on the DOM readiness
In my code I have found the following lines. This shows that I force a draw on the label before rotating the image.
if (!this._drawn) myImageLabel.draw(); // 1st time force a draw, otherwise rotating the image will fail because an asynchronously drawn object has not all tags in place
if (this.heading != 0) this.rotateImage(this.heading, true);
Edit 3: Code example how to create the Infobox.js
this._img = document.createElement('img');
... further manipulations of _img / Size / Id / ...
var planeImageLabelOptions = {
content: this._img,
disableAutoPan: true,
boxStyle: planeImageLabelBoxStyle,
pixelOffset: new google.maps.Size(-imgOffsetW / 2, -imgOffsetH / 2),
closeBoxURL: "",
position: latlng,
zIndex: this.altitude < 0 ? 100 : this.altitude
};
var planeImageLabel = new InfoBox(planeImageLabelOptions);

I also had a hard time to figure out the way to rotate .png marker.
I solved it like below. You can create many markers with same custom image and
rotate a specific marker you want to rotate.
I hope it helpful to you.
var id = 'my_marker_01';
var img_url = "../img/car.png";
var my_icon = img_url + "#" + id;
var marker = new google.maps.Marker({
icon: my_icon,
...
});
var rotate = 45;
$(`img[src="${my_icon}"]`).css(
{'-webkit-transform' : 'rotate('+ rotate +'deg)',
'-moz-transform' : 'rotate('+ rotate +'deg)',
'-ms-transform' : 'rotate('+ rotate +'deg)',
'transform' : 'rotate('+ rotate +'deg)'});

How could I rotate an image (marker image) on a Google map V3?
I had the same problem and I solved it with the next code:
var gmap;
NgMap.getMap(function(map){
gmap = map;
});
I suppose that you have a variable with the icon, for example:
var imagePath = 'img/customMarker.png';
First, we need to create our marker options:
var markerOptions = {
location: [x, y],
title:'some text',
draggable: true,
.
.
.
icon: imagePath
};
Let's create a marker:
var marker = new google.maps.Marker(markerOptions);
And we have to set the map:
marker.setMap(map);
Now if you want to rotate the image you need to do the next:
Change the imagePath variable's value to 'img/customMarker.png#yourId'
Set rotation value with css (e.g. with JQuery)
Let's see
imagePath = 'img/customMarker.png#markerOne';
$('img[src="img/customMarker.png#markerOne"]').css({
'transform': 'rotate(45deg)'
});
Of course you can do it fancier:
function rotateMarker(selector, degree){
$('img[src="img/customMarker.png#'+selector+'"]').css({
'transform': 'rotate('+degree+'deg)'
});
}
And your call:
rotateMarker('markerOne', 45);
That's all.
I hope it could be helpful.

I have done the rotation in v3 with the following code:
<canvas id="carcanvas" width="1" height="1"></canvas>
if (document.getElementById('carcanvas').getContext) {
var supportsCanvas = true;
} else {
var supportsCanvas = false;
}
var rImg = new Image();
rImg.src='/images/cariconl.png';
// Returns the bearing in radians between two points.
function bearing( from, to ) {
// Convert to radians.
var lat1 = from.latRadians();
var lon1 = from.lngRadians();
var lat2 = to.latRadians();
var lon2 = to.lngRadians();
// Compute the angle.
var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
if ( angle < 0.0 )
angle += Math.PI * 2.0;
if (angle == 0) {angle=1.5;}
return angle;
}
function plotcar() {
canvas = document.getElementById("carcanvas").getContext('2d');
var cosa = Math.cos(angle);
var sina = Math.sin(angle);
canvas.clearRect(0,0,32,32);
canvas.save();
canvas.rotate(angle);
canvas.translate(16*sina+16*cosa,16*cosa-16*sina);
canvas.drawImage(rImg,-16,-16);
canvas.restore();
}
and in the animation method :
if (supportsCanvas) {
angle = bearing(new google.maps.LatLng(lat1, lng1),new google.maps.LatLng(lat2, lng2));
plotcar();
}
I hope that help.

You did not state it in your question, but I am assuming that you want this rotation in relation to a line between point a and point b, which would be their path. In order to make a google svg icon that can be rotated, you will want to use the google symbol class object to define the properties of your marker symbol. This does not use a full .svg file, but only the d attribute of the path. Note that the google symbol class can only take one path per marker.
Additional attributes for color, stroke, width, opacity, etc. may be set after the marker has been created with javascript (updating the marker object properties directly), or with CSS (updating the marker properties by adding and removing classes).
As an example, the following will create an arrow marker that can be dragged, and it will be rotated around the point on the map that is the lat and long for the marker even after it is moved.
The HTML
<body id="document_body" onload="init();">
<div id="rotation_control">
Heading°<input id="rotation_value" type="number" size="3" value="0" onchange="setRotation();" />
</div>
<div id="map_canvas"></div>
</body>
The CSS (yes,verbose... I hate ugly)
#document_body {
margin:0;
border: 0;
padding: 10px;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
color: #f0f9f9;
text-align: center;
text-shadow: 1px 1px 1px #000;
background:#1f1f1f;
}
#map_canvas, #rotation_control {
margin: 1px;
border:1px solid #000;
background:#444;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#map_canvas {
width: 100%;
height: 360px;
}
#rotation_control {
width: auto;
padding:5px;
}
#rotation_value {
margin: 1px;
border:1px solid #999;
width: 60px;
padding:2px;
font-weight: bold;
color: #00cc00;
text-align: center;
background:#111;
border-radius: 4px;
}
The Javascript (in plain vanilla flavor for understanding core concepts)
var map, arrow_marker, arrow_options;
var map_center = {lat:41.0, lng:-103.0};
var arrow_icon = {
path: 'M -1.1500216e-4,0 C 0.281648,0 0.547084,-0.13447 0.718801,-0.36481 l 17.093151,-22.89064 c 0.125766,-0.16746 0.188044,-0.36854 0.188044,-0.56899 0,-0.19797 -0.06107,-0.39532 -0.182601,-0.56215 -0.245484,-0.33555 -0.678404,-0.46068 -1.057513,-0.30629 l -11.318243,4.60303 0,-26.97635 C 5.441639,-47.58228 5.035926,-48 4.534681,-48 l -9.06959,0 c -0.501246,0 -0.906959,0.41772 -0.906959,0.9338 l 0,26.97635 -11.317637,-4.60303 c -0.379109,-0.15439 -0.812031,-0.0286 -1.057515,0.30629 -0.245483,0.33492 -0.244275,0.79809 0.0055,1.13114 L -0.718973,-0.36481 C -0.547255,-0.13509 -0.281818,0 -5.7002158e-5,0 Z',
strokeColor: 'black',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#fefe99',
fillOpacity: 1,
rotation: 0,
scale: 1.0
};
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: map_center,
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
});
arrow_options = {
position: map_center,
icon: arrow_icon,
clickable: false,
draggable: true,
crossOnDrag: true,
visible: true,
animation: 0,
title: 'I am a Draggable-Rotatable Marker!'
};
arrow_marker = new google.maps.Marker(arrow_options);
arrow_marker.setMap(map);
}
function setRotation(){
var heading = parseInt(document.getElementById('rotation_value').value);
if (isNaN(heading)) heading = 0;
if (heading < 0) heading = 359;
if (heading > 359) heading = 0;
arrow_icon.rotation = heading;
arrow_marker.setOptions({icon:arrow_icon});
document.getElementById('rotation_value').value = heading;
}
And the best yet, doing it this way assures the marker is a Google MVC object, giving it all the additional methods provided by the MVC object.
If you must have multi-colored images as your marker, then creating a .png sprite sheet with a rendition of the image at all the angles you want it to be shown, and then problematically select the correct image to use based on the computed bearing between the two points you are using. However,this would not be an SVG image, but a regular marker image.
Hope this helps in making some decisions regarding your map markers.

Nobody mentioned about using pre-rotated icons. Depending on your application, you could take one icon and rotate it +10 degrees, +20 degrees ... +350 degrees and instead of rotating marker itself, just assign different icon to it - one out of 36 if 10 degrees resolution is good enough. That's also very light on client's resources.
In the example below I generated 36 icons, every one of them is 10 degrees rotated. Their names are: icon0.png, icon10.png, icon20.png, ... icon340.png, icon350.png, icon360.png. The 0 and 360 are the very same icon (e.g symlink)
var rotation = 123 // degrees
var iconName = "icon" + (Math.round(rotation/10)*10).toString() + ".png"
var marker = new google.maps.Marker({
icon: iconName
})

I was able to solve this pretty easily but using the marker.icon.rotation option pointing to a custom symbol that uses the svg path syntax.
$scope.triangle = {
path: 'M 0 0 L -35 -100 L 35 -100 z',
fillColor: '#3884ff',
fillOpacity: 0.7,
scale: 1,
strokeColor: '#356cde',
rotation: 90,
strokeWeight: 1
};
If using angular-google-maps it is trivial to bind a ui control to change the triangle.rotation.
Like I did with this slider.
<slider ng-model="triangle.rotation" floor="0" ceiling="359" step="5" precsion="1"></slider>
But you could use a forum too.
here is my plunker http://plnkr.co/edit/x0egXI

This is how i implemented my image rotated, I considered the marker in the form of overlay and that overlay is position to the position, Below code will be added .
Without using any additional library it is rotated,And you need to workaround to add click events and mouse events for the overlay, not similar to marker click events.
With googleMap markers customization, there will be addition memory usage in the map.
This will also reduce the memory consumption of custom markers in your map.
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
div.htmlMarker {
color: red;
cursor: pointer;
}
</style>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
<script>
var overlay;
function initialize() {
var myLatLng = new google.maps.LatLng(40, -100);
var mapOptions = {
zoom: 10,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
function HTMLMarker(lat, lng, rotation) {
this.lat = lat;
this.lng = lng;
this.rotation = rotation;
this.pos = new google.maps.LatLng(lat, lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function () {}
//Initilize your html element here
HTMLMarker.prototype.onAdd = function () {
div = document.createElement('DIV');
div.style.position='absolute';
div.style.transform='rotate('+this.rotation +'deg)';
div.style.MozTransform='rotate('+this.rotation +'deg)';
div.className = "htmlMarker";
//image source use your own image in src
div.innerHTML = '<img src="prudvi.png" alt="Mountain View" style="width:25px;height:22px">' ;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
this.div=div;
}
HTMLMarker.prototype.draw = function () {
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var panes = this.getPanes();
this.div.style.left = position.x + 'px';
this.div.style.top = position.y - 30 + 'px';
}
//Added 50 marker with random latlng location and random rotation,
for (i = 0; i < 50; i++) {
var PoslatLng = new google.maps.LatLng(myLatLng.lat() + Math.random() - 0.5, myLatLng.lng() + Math.random() - 0.5);
var htmlMarker = new HTMLMarker(myLatLng.lat() + Math.random() - 0.5,myLatLng.lng() + Math.random() - 0.5, Math.floor(Math.random() * 359));
htmlMarker.setMap(gmap);
google.maps.event.addListener(htmlMarker, 'click', function() {
console.log('clciked')
gmap.setZoom(8);
gmap.setCenter(htmlMarker.getPosition());
});
}
}
</script>
</html>

You could call the yourmarker.setIcon(canvas.toDataUrlOrSomeThig) every time the image changes. I don't see anything in the api reference for using the canvas element directly, except if you implement you own google.maps.OverlayView.
If you only want animation you could use a gif, and add the marker option optimized: false to it.

The easiest way may be to use the rotation property of google.maps.Symbol. Just set it as a property of your icon when creating or updating your marker:
new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 7,
rotation: 193
},
map: map
});
Plunker

The idea is to first draw the rotated marker image on a hidden canvas.
Say, you have a hidden canvas:
<canvas id="carCanvas" width="50" height="50" style="display:none"></canvas>
Now you can do this:
function updateCarMarker(i,lat, lng, icon = "img/carIcon.png") {
var latLong = new google.maps.LatLng(lat, lng);
if (!carMarkers[i]){
var carImage = new Image();
carImage.onload = ()=>{
drawMovedCar(i,latLong,carImage);
}
carImage.src=icon;
} else {
drawMovedCar(i,latLong,carMarkers[i].carImage);
}
}
function drawMovedCar(i,latLong,I){
let m=carMarkers[i];
let canvas = document.getElementById("carCanvas");
let C = canvas.getContext('2d');
if (m){
var distance = google.maps.geometry.spherical.computeDistanceBetween(
m.getPosition(), latLong);
var deg = (distance<2)?carMarkers[i].deg
:google.maps.geometry.spherical.computeHeading(m, latLong);
carMarkers[i].setMap(null);
} else {
var deg=0;
}
C.save();
C.clearRect(0, 0, canvas.width, canvas.height);
C.translate(canvas.width/2,canvas.height/2);
C.rotate(deg * Math.PI / 180);
C.scale(0.4,0.4);
C.drawImage(I,-I.width/2,-I.height/2,I.width,I.height);
C.restore();
if (!m){
m = new google.maps.Marker({
position: latLong,
map: map,
icon: canvas.toDataURL("image/png",1)
});
m.deg = deg;
m.carImage = I;
carMarkers[i]=m;
} else {
m.setIcon(canvas.toDataURL("image/png",1));
m.setPosition(latLong);
}
}
The above is my original code. I have left it intact so that you can see my other optimizations.

Using MarkerWithLabel Library, you can achieve that in such way:
var ico = document.createElement('img');
ico.src = 'ImageSource';
ico.setAttribute('style', 'transform:rotate('30deg);');
mapMarkers[0].labelContent = ico;
mapMarkers[0].label.draw();

Assuming you only use that image within Google Maps, you can do the following
bearing = 20
document.querySelectorAll('img[src="/images/imageName"]').forEach((node) => {
node.style['transform'] = `rotate(${bearing}deg)`
node.style['webkitTransform'] = `rotate(${bearing}deg)`
node.style['MozTransform'] = `rotate(${bearing}deg)`
node.style['msTransform'] = `rotate(${bearing}deg)`
node.style['OTransform'] = `rotate(${bearing}deg)`
})
This reaches down the dom tree and sets the transform for the marker icon to rotate the degrees you want. The image imageName should be facing North
Not to sure if the webkit, Moz, ms and O version are needed but hey 🤷🏽‍♂️ cant hurt

If you are using SVG, Then this is the best way to rotate it.
let marker_, svg_, size_ = 100, rotation_ = 50
// Get SVG
fetch('https://upload.wikimedia.org/wikipedia/commons/7/78/Space-shuttle.svg')
.then(response => response.text())
.then(text => {
svg_ = text;
svg_ = svg_
.replace(/^<\?(.+)\?>$/gm, '') // unsupported unnecessary line
// You can replace anything you want, but first of all check your svg code
.replace(/width.+\Wheight\S+/,
'width="{{width}}" height="{{height}}" transform="{{transform}}" ')
// Load Map
initMap()
})
function getIcon(rotation){
return {url:`data:image/svg+xml;charset=utf-8,
${encodeURIComponent(svg_
.replace('{{width}}', 100)
.replace('{{height}}', 100)
.replace('{{transform}}', `rotate(${rotation},0,0)`))}`,anchor: new google.maps.Point(50, 50),
origin: new google.maps.Point(0, 0)}
}
// Map
function initMap() {
const position = {lat: 36.720426, lng: -4.412573};
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 19,
center: position
})
marker_ = new google.maps.Marker({
position: position,
map: map,
icon: getIcon(rotation_)
})
}
// Change rotation
$input_ = document.querySelector('input')
$input_.value = rotation_
$input_.onchange = () => {
marker_.setIcon(getIcon(parseInt($input_.value))
)
}
* {
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100vh;
}
input {
position: fixed;
z-index: 1;
margin: 100px;
padding: 10px;
border-radius: 2px;
background-color: red;
border: none;
color: white;
font-family: 'Roboto';
width: 70px;
}
<script src="https://maps.google.com/maps/api/js"></script>
<input type="number" placeholder="rotation">
<div id="map"></div>

I have found an easy way to rotate the png image marker for the google marker. Create an custom marker overriding google.maps.OverlayView and rotate the image simply with css/inline style
export const createCustomMarker = ({ OverlayView = google.maps.OverlayView, ...args }) => {
class GoogleMarker extends OverlayView {
options: any = {};
div: any = null;
innerHtml: any = null;
constructor(options) {
super();
this.options = options;
this.setMap(options.map);
}
createDiv() {
const options = this.options;
this.div = document.createElement('div');
this.div.style.position = 'absolute';
this.setRotation(this.options.rotation);
if (options.icon) {
this.setInnerHtml(this.getInnerImageHtml(options));
}
}
getInnerImageHtml(options) {
const size = this.getSize(options);
const label = this.options.label;
const labelHtml = label ? `<span style="color:black;margin-left: -40px;width: 100px;text-align: center;display: block;font-weight:bold;">${label}</span>` : "";
return `<img style="height:${size.height}px;width:${size.width}px" id="${options.id || ''}" src="${options.icon}">${labelHtml}`;
}
addListeners() {
const self = this;
google.maps.event.addDomListener(this.div, 'click', event => {
google.maps.event.trigger(self, 'click');
});
this.div.onmouseenter = function () {
debugger
google.maps.event.trigger(self, 'onmouseenter');
}
this.div.onmouseover = function () {
google.maps.event.trigger(self, 'onmouseover');
}
this.div.onmouseleave = function () {
google.maps.event.trigger(self, 'onmouseleave');
}
this.div.onmouseout = function () {
google.maps.event.trigger(self, 'onmouseout');
}
}
appendDivToOverlay(appendDiv: any) {
const panes: google.maps.MapPanes = this.getPanes();
panes.floatPane.appendChild(appendDiv);
}
setRotation(degrees: number) {
if (this.div) {
this.div.style.transform = 'rotate(' + degrees + 'deg)';
}
this.options.rotation = degrees;
}
getRotation() {
return this.options.rotation;
}
setInnerHtml(html: string) {
this.innerHtml = html;
this.div.innerHTML = this.innerHtml;
}
private positionDiv(div: any, options: any) {
if (div != null) {
const point = this.getProjection().fromLatLngToDivPixel(options.latlng);
if (point) {
const size = this.getSize(options);
const anchor = options.anchor ? options.anchor : new google.maps.Point((size.width / 2), (size.height / 2))
const leftAnchor = anchor.x;
const topAnchor = anchor.y;
div.style.left = `${point.x - leftAnchor}px`;
div.style.top = `${point.y - topAnchor}px`;
}
}
}
private getSize(options) {
const size = options.size || { height: 52, width: 52 };
return size;
}
draw() {
if (!this.div) {
this.createDiv();
this.appendDivToOverlay(this.div);
this.addListeners();
}
this.positionDiv(this.div, this.options);
}
remove() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
}
setVisible(value: boolean) {
if (this.div) {
this.div.style["display"] = value ? "block" : "none";
}
}
getVisible() {
if (this.div) {
return this.div.style["display"] == "none";
}
return false;
}
setPosition(position) {
this.options.latlng = position;
this.infoOptions.latlng = position;
this.positionDiv(this.div, this.options);
}
getPosition() {
return this.options.latlng;
}
getDraggable() {
return false;
}
isHTML(html: string) {
return /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(html);
}
}
return new GoogleMarker(args)
}
After creating this custom marker - Initialize the marker in the following way
import { createCarMarker } from "./marker.component"; // dynamic path to component
let marker = createCarMarker({
id: id, // will add id to the parent container div
latlng: new google.maps.LatLng(0, 0), // replace latitude-longitude with your values
map: this.map,
size: new google.maps.Size(52, 52), // replace the image size with your values
rotation: markerData.direction, // Provide values in degrees
icon: iconUrl, // Replace it with your image url
label: markerLabel // Provide marker label. Optional field
});
Now simply rotate the marker using the following method
marker.setRotation(180); // You just need to call only this method every-time the degrees changes.
To listen the changes on the marker.
google.maps.event.addDomListener(marker, 'click', function (event) {
});
google.maps.event.addListener(marker, 'onmouseenter', function (event) {
});
google.maps.event.addListener(marker, 'onmouseleave', function (event) {
});
google.maps.event.addListener(marker, 'onmouseover', function (event) {
});
google.maps.event.addListener(marker, 'onmouseout', function (event) {
});
You can customize the listeners or add new/update in the custom marker class according to your requirement.

var icon = {
path: aeroplanePath/image,
fillColor: '#0000FF',
fillOpacity: .6,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
scale: 1,
rotation: 180
}
var marker = new google.maps.Marker({
position: positions[k],
icon: icon,
draggable: true,
title: "BOING-707",
});

Related

Google Maps API v3 add shadow on clicked marker

I am aware that officially google removed shadows on markers in v3 of the google maps API. With this is in mind i have a project where marker shadows are required. I would like to place a shadow on a marker when the marker is clicked. Its essentially add an event listener to a marker and when its clicked add a shadow to the marker as a way to show that the clicked marker is the active marker.
I read through some pages e.g. marker shadows in google maps v3 which put shadows on all markers but I would like to borrow on such an example and have the shadows added when a marker is clicked and have the shadows removed when the marker loses focus i.e. when another marker is clicked.
My jsfiddle with two markers to play with is here and code is below: jsfiddle is here
var marker;
var locations = [["6","43.683","9.58","3002: Location 1",1],["7","45.149","9.44","3003: Location",2]];
function initialize() {
var mapProp = {
center: new google.maps.LatLng(43.683, 9.44),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position:new google.maps.LatLng(locations[i][1], locations[i][2]),
icon:'https://maps.gstatic.com/mapfiles/ms2/micons/purple.png',
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
alert(locations[i][3] + " was clicked");
}
})(marker, i));
marker.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
If anyone can help with coming up with a strategy or even a code snippet to place shadows on a marker when its clicked I would be very happy. Please feel free to fork the jsfiddle and add to it and post the link back here.
Another option, create the marker shadow object (from my answer to the question you reference) the first time a marker is clicked, move it to a newly clicked marker when that is clicked (add a .setPosition method to the MarkerShadow class).
var marker;
var locations = [
["6", "43.683", "9.58", "3002: Location 1", 1, true],
["7", "45.149", "9.44", "3003: Location", 2, false]
];
var markerShadow;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapProp = {
center: new google.maps.LatLng(43.683, 9.44),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var iconShadow = {
url: 'http://www.geocodezip.com/mapIcons/marker_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
size: new google.maps.Size(37, 34),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(10, 34)
};
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/purple.png',
title: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
if (markerShadow && markerShadow.setPosition) {
markerShadow.setPosition(this.getPosition());
} else if (!markerShadow) {
markerShadow = new MarkerShadow(marker.getPosition(), iconShadow, map);
}
}
})(marker, i));
marker.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
// marker shadow code
MarkerShadow.prototype = new google.maps.OverlayView();
MarkerShadow.prototype.setPosition = function(latlng) {
this.posn_ = latlng;
this.draw();
}
/** #constructor */
function MarkerShadow(position, options, map) {
// Initialize all properties.
this.posn_ = position;
this.map_ = map;
if (typeof(options) == "string") {
this.image = options;
} else {
this.options_ = options;
if (!!options.size) this.size_ = options.size;
if (!!options.url) this.image_ = options.url;
}
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
MarkerShadow.prototype.onAdd = function() {
// if no url, return, nothing to do.
if (!this.image_) return;
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = this.options_.size.x + 'px';
img.style.height = this.options_.size.y + 'px';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayShadow.appendChild(div);
};
MarkerShadow.prototype.draw = function() {
// if no url, return, nothing to do.
if (!this.image_) return;
// We use the coordinates of the overlay to peg it to the correct position
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
var posn = overlayProjection.fromLatLngToDivPixel(this.posn_);
// Resize the image's div to fit the indicated dimensions.
if (!this.div_) return;
var div = this.div_;
if (!!this.options_.anchor) {
div.style.left = Math.floor(posn.x - this.options_.anchor.x) + 'px';
div.style.top = Math.floor(posn.y - this.options_.anchor.y) + 'px';
}
if (!!this.options_.size) {
div.style.width = this.size_.x + 'px';
div.style.height = this.size_.y + 'px';
}
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
MarkerShadow.prototype.onRemove = function() {
if (!this.div_) return;
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>
fiddle showing result

Getting a latitude and longitude from Google Map based on mouse coordinates

I have a page where I have a tiny person that can be dragged around using RxJS. When the drag ends, if it ends over a google map on the page, I want to convert the mouse coordinates at the point the person was dropped into a latitude and longitude.
I've found/cobbled together this implementation from elsewhere on SO and the Web.
function pixelOffsetToLatLng(map, offsetx, offsety) {
var mapZoom = map.getZoom();
var scale = Math.pow(2, mapZoom);
var mapCenter = map.getCenter();
var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(mapCenter);
var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0);
var worldCoordinateNewCenter = new google.maps.Point(
worldCoordinateCenter.x - pixelOffset.x,
worldCoordinateCenter.y + pixelOffset.y
);
var latLngPosition = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
return latLngPosition;
}
But it is giving incorrect results. It seems to be particular sensitive to position on the planet and to zoom level.
I've included a snippet below that centres on 0,0 with a marker nearby. If you repeatedly drop the person on the marker and zoom out, you'll see that the value of lat, lng changes significantly with zoom level. And I don't understand why...
Thanks in advance!
//adapted from here https://gist.github.com/mattpodwysocki/2156153
//this is an RXJS drag and drop implementation. It is used below to provide screen coordinates to Google Maps
(function(dragger) {
'use strict';
dragger.init = function() {
var dragTarget = $('#dragTarget');
// Get the three major events
window.dragger.mouseup = dragTarget.onAsObservable('mouseup');
window.dragger.mousemove = dragTarget.onAsObservable('mousemove');
window.dragger.mousedown = dragTarget.onAsObservable('mousedown').select(function(event) {
// calculate offsets when mouse down
event.preventDefault();
return {
left: event.clientX - dragTarget.offset().left,
top: event.clientY - dragTarget.offset().top
};
});
// Combine mouse down with mouse move until mouse up
window.dragger.mousedrag = window.dragger.mousedown.selectMany(function(offset) {
return window.dragger.mousemove.select(function(pos) {
// calculate offsets from mouse down to mouse moves
return {
left: pos.clientX - offset.left,
top: pos.clientY - offset.top
};
}).takeUntil(window.dragger.mouseup);
});
window.dragger.mousedrag.subscribe(function(pos) {
// Update position
dragTarget.css({
top: pos.top,
left: pos.left
});
});
window.dragger.mousedown.subscribe(function() {
$('#dragTarget #person').hide();
$('#dragTarget #shopper').show();
});
window.dragger.mouseup.subscribe(function(pos) {
$('#dragTarget #person').show();
$('#dragTarget #shopper').hide();
$('aside ul').append($('<li>').append('shopper dropped at <br/>x:' + pos.clientX + ' and y:' + pos.clientY));
});
};
}(window.dragger = window.dragger || {}));
window.dragger.init();
(function(gmaps) {
'use strict';
//a function cobbled together from elsewhere on StackOverflow to convert from page coordinates
//to a latitude and longitude
function pixelOffsetToLatLng(map, offsetx, offsety) {
var mapZoom = map.getZoom();
var scale = Math.pow(2, mapZoom);
var mapCenter = map.getCenter();
var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(mapCenter);
var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0);
var worldCoordinateNewCenter = new google.maps.Point(
worldCoordinateCenter.x - pixelOffset.x,
worldCoordinateCenter.y + pixelOffset.y
);
var latLngPosition = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
return latLngPosition;
}
gmaps.init = function() {
//setup a map centered on 0,0
var mapCanvas = $('#map');
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvas[0], mapOptions);
//put a marker nearby as a reference point
var marker = new google.maps.Marker({
position: new google.maps.Marker({lat:0.001, lng:0.001}),
map: map,
title: '0.001, 0.001'
});
//run this function every time the draggable person is dropped
window.dragger.mouseup.subscribe(function(pos) {
var ll = pixelOffsetToLatLng(map, pos.pageX, pos.pageY);
$('aside ul').append($('<li>').append('shopper dropped at <br/>lat:' + ll.lat() + ' and y:' + ll.lng()));
});
};
}(window.gmaps = window.gmaps || {}));
window.gmaps.init();
#dragTarget {
position:absolute;
z-index: 999;
}
.grabbable {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#map {
height:400px;
width:400px;
float:left;
background-color:lightyellow;
}
aside {
height:400px;
width:200px;
float:right;
background-color:lightgrey;
}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs-jquery/1.1.6/rx.jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="grabbable fa fa-2x fa-female" id="dragTarget"></div>
<div id="map"></div>
<aside><ul></ul></aside>

Workng Google Maps API I have it setup so that the user can add a selection rectangle to their screen. How can I only do this just once?

Basically I only want the user to be able to add one rectangluar selection to the map. But right now it just adds as many as you want. I tried adding making the addSelection equal to noop. But that didn't do it for me. I thought that that would only allow the function to execute once. Anyway I am trying to only allow the user to add one rectangular selection to the map. I was wondering what the best path to peruse would be.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<body>
<div id="map"></div>
<script>
var map;
var rectangle;
var infoWindow;
var penang = {
lat: 5.466277,
lng: 100.289981
};
/**
* The CenterControl adds a control to the map that recenters the map on Chicago.
* This constructor takes the control DIV as an argument.
* #constructor
*/
function noop() {}
function addSelection(controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to make selection';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Select Region';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to Chicago.
controlUI.addEventListener('click', function() {
var centerView = map.getCenter();
var bounds = map.getBounds();
var hoach = bounds.getNorthEast().lat();
var moach = bounds.getSouthWest().lat();
var dim = (hoach - moach) / 4;
var selectionBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(centerView.lat() - dim, centerView.lng() - dim),
new google.maps.LatLng(centerView.lat() + dim, centerView.lng() + dim));
// Define the rectangle and set its editable property to true
rectangle = new google.maps.Rectangle({
bounds: selectionBounds,
editable: true,
draggable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
});
});
addSelection == noop; //Why doesen't this limit it to one?
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
panControl: true,
center: penang
});
// Create the DIV to hold the control and call the CenterControl() constructor
// passing in this DIV.
var selectionControlDiv = document.createElement('div');
var selectionControl = new addSelection(selectionControlDiv, map);
selectionControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(selectionControlDiv);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?&callback=initMap&signed_in=true" async defer>
</script>
</body>
Making addSelection equal to noop is useless, you must remove the click-listener.
But however, when you only need the button once you may simply remove the button after click:
controlUI.addEventListener('click', function() {
this.parentNode.removeChild(this);
//continue with your code......
});

How to know radius while drawing a circle on Google Maps

What I have :
As per Google suggestion we have used MVC object and the events DistanceWidget & RadiusWidget to display the radius while re-sizing the circle which is working fine for existing circle (circle drawn by DistanceWidget).
Fiddle Demo
What I need :
I need to show the radius of the circle while drawing a new circle. The event DistanceWidget & RadiusWidget are used only for existing circle (circle drawn by DistanceWidget) not for new circle (user drawn circle by using DrawingManager tool).
Is it possible to show DistanceWidget for creating new circle?
Fiddle
a nice challenge indeed. As #DaveAlperovich has commented, you can't use the DrawingManager to retrieve this piece of information; While drawing, you don't have any access to the circle; You have to wait for the DrawingManager to trigger the circlecomplete event to get a reference to this circle.
Nevertheless, if you can't have a real manager, just fake it.
See the snippet and the description right below.
var FakeDrawer = function(controlDiv, map) {
var self = this;
/* Initialization, some styling ... */
self._map = map;
self.initControls(controlDiv);
/* Setup the click event listener: drawingmode for the circle control */
google.maps.event.addDomListener(self._controls.circle, 'click', function() {
/* Ensure consistency */
self.reset();
/* Bind the drawing mode */
self._map.setOptions({
draggableCursor: "crosshair"
});
self._drawListener = self._map.addListener('mousedown', self.drawingMode(self));
});
/* Just reset things for the stop controls */
google.maps.event.addDomListener(self._controls.stop, 'click', function() {
self.reset();
});
};
FakeDrawer.prototype.drawingMode = function(self) {
return function(center) {
/* Let's freeze the map during drawing */
self._map.setOptions({
draggable: false
});
/* Create a new circle which will be manually scaled */
var circle = new google.maps.Circle({
fillColor: '#000',
fillOpacity: 0.3,
strokeWeight: 2,
clickable: false,
editable: false,
map: self._map,
radius: 1,
center: center.latLng,
zIndex: 1
});
/* Update the radius on each mouse move */
var onMouseMove = self._map.addListener('mousemove', function(border) {
var radius = 1000 * self.distanceBetweenPoints(center.latLng, border.latLng);
circle.setRadius(radius);
/* Here is the feature, know the radius while drawing */
google.maps.event.trigger(self, 'drawing_radius_changed', circle);
});
/* The user has finished its drawing */
google.maps.event.addListenerOnce(self._map, 'mouseup', function() {
/* Remove all listeners as they are no more required */
google.maps.event.removeListener(onMouseMove);
circle.setEditable(true);
/* Restore some options to keep a consistent behavior */
self.reset();
/* Notify listener with the final circle */
google.maps.event.trigger(self, 'circlecomplete', circle);
});
};
};
FakeDrawer.prototype.reset = function() {
var self = this;
self._map.setOptions({
draggableCursor: "",
draggable: "true"
});
/* Remove any applied listener */
if (self._drawListener) {
google.maps.event.removeListener(self._drawListener);
}
};
/* Create views and associated css */
FakeDrawer.prototype.initControls = function(controlDiv) {
var self = this;
function createControlUI(title, image) {
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '1px solid rgba(0, 0, 0, .15)';
controlUI.style.boxShadow = '1 4px -1px rgba(0, 0, 0, .3)';
controlUI.style.marginTop = '10px';
controlUI.style.textAlign = 'center';
controlUI.style.width = '25px';
controlUI.style.height = '25px';
controlUI.style.display = 'inline-block';
controlUI.title = title;
if (image == "circle") {
controlUI.style.borderLeft = "none";
}
var controlImgWrapper = document.createElement('div');
controlImgWrapper.style.width = '16px';
controlImgWrapper.style.height = '16px';
controlImgWrapper.style.overflow = 'hidden';
controlImgWrapper.style.display = 'inline-block';
controlImgWrapper.style.marginTop = '4px';
controlUI.appendChild(controlImgWrapper);
var imageOffset = {
"circle": 0,
"openhand": -9 * 16
}[image];
var controlImg = document.createElement('img');
controlImg.src = 'https://maps.gstatic.com/mapfiles/drawing.png';
controlImg.style.marginTop = imageOffset + "px";
controlImgWrapper.appendChild(controlImg);
var focusBackground = function() {
controlUI.style.backgroundColor = '#eee';
};
var unfocusBackground = function() {
controlUI.style.backgroundColor = "#fff";
};
controlImg.addEventListener('mouseenter', focusBackground);
controlImg.addEventListener('mouseout', unfocusBackground);
controlUI.addEventListener('mouseenter', focusBackground);
controlUI.addEventListener('mouseout', unfocusBackground);
return controlUI;
}
self._controls = {
circle: createControlUI("Draw a circle", "circle"),
stop: createControlUI("Stop drawing", "openhand"),
};
controlDiv.appendChild(self._controls.stop);
controlDiv.appendChild(self._controls.circle);
};
FakeDrawer.prototype.distanceBetweenPoints = function(p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371;
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
};
function InitializeMap() {
var latlng = new google.maps.LatLng(29.760193, -95.36939);
var myOptions = {
zoom: 12,
center: latlng,
zoomControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
/* Add a custom control */
var fakeDrawerDiv = document.createElement('div');
var fakeDrawer = new FakeDrawer(fakeDrawerDiv, map);
fakeDrawerDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(fakeDrawerDiv);
var updateInfo = function(circle) {
document.getElementById("info").innerHTML = "Radius: " + circle.getRadius();
};
google.maps.event.addListener(fakeDrawer, 'drawing_radius_changed', updateInfo);
google.maps.event.addListener(fakeDrawer, 'circlecomplete', function(circle) {
google.maps.event.addListener(circle, 'radius_changed', function() {
updateInfo(circle);
});
});
}
google.maps.event.addDomListener(window, 'load', InitializeMap);
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map {
height: 80%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=drawing&ext=.js"></script>
<div id="map"></div>
<div id="info"></div>
Step 1: Create a custom control
Somewhere in the file or as an external library:
var FakeDrawer = function (controlDiv, map) {
var self = this;
/* Initialization, some styling ... */
self._map = map;
self.initControls(controlDiv);
};
FakeDrawer.prototype.initControls(controlDiv) {
var self = this;
function createControlUI (title, image) {
var controlUI = document.createElement('div');
/* ... See the snippet for details .. just some styling */
return controlUI;
}
self._controls = {
circle: createControlUI("Draw a circle", "circle"),
stop: createControlUI("Stop drawing", "openhand"),
};
controlDiv.appendChild(self._controls.stop);
controlDiv.appendChild(self._controls.circle);
};
Step 2: Add some sugars
This are functions that we may use; Highly inspired from your JsFiddle :)
A reset method to recover a consistent state when needed:
FakeDrawer.prototype.reset = function () {
var self = this;
self._map.setOptions({
draggableCursor: "",
draggable: "true"
});
/* Remove any applied listener */
if (self._drawListener) { google.maps.event.removeListener(self._drawListener) ; }
};
And, a distance computer:
FakeDrawer.prototype.distanceBetweenPoints = function (p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371;
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
};
Step 3: Create your own drawing mode
Now that we have some controls, we have to define their behavior. The stop control is straightforward; Let's have a look to the circle control.
FakeDrawer.prototype.drawingMode = function (self) {
return function (center) {
/* Let's freeze the map during drawing */
self._map.setOptions({draggable: false});
/* Create a new circle which will be manually scaled */
var circle = new google.maps.Circle({
fillColor: '#000',
fillOpacity: 0.3,
strokeWeight: 2,
clickable: false,
editable: false,
map: self._map,
radius: 1,
center: center.latLng,
zIndex: 1
});
/* Update the radius on each mouse move */
var onMouseMove = self._map.addListener('mousemove', function (border) {
var radius = 1000 * self.distanceBetweenPoints(center.latLng, border.latLng);
circle.setRadius(radius);
/* Here is the feature, know the radius while drawing */
google.maps.event.trigger(self, 'drawing_radius_changed', circle);
});
/* The user has finished its drawing */
google.maps.event.addListenerOnce(self._map, 'mouseup', function () {
/* Remove all listeners as they are no more required */
google.maps.event.removeListener(onMouseMove);
circle.setEditable(true);
/* Restore some options to keep a consistent behavior */
self.reset();
/* Notify listener with the final circle */
google.maps.event.trigger(self, 'circlecomplete', circle);
});
};
};
Step 4: Bind controls
Now that everything is okay, let's add some listeners to the initial version of the constructor so that each control has a corresponding action when clicked.
var FakeDrawer = function (controlDiv, map) {
var self = this;
/* Initialization, some styling ... */
self._map = map;
self.initControls(controlDiv);
/* Setup the click event listeners: drawingmode */
google.maps.event.addDomListener(self._controls.circle, 'click', function() {
/* Ensure consistency */
self.reset();
/* Only drawingmode */
self._map.setOptions({draggableCursor: "crosshair"});
self._drawListener = self._map.addListener('mousedown', self.drawingMode(self));
});
google.maps.event.addDomListener(self._controls.stop, 'click', function () {
self.reset();
});
};
Step 5: Use it!
Assuming that your map has been initialized correctly.
Inside your map init function:
var fakeDrawerDiv = document.createElement('div');
var fakeDrawer = new FakeDrawer(fakeDrawerDiv, map);
fakeDrawerDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(fakeDrawerDiv);
var updateInfo = function (circle) {
document.getElementById("info").innerHTML = "Radius: " + circle.getRadius();
};
google.maps.event.addListener(fakeDrawer, 'drawing_radius_changed', updateInfo);
google.maps.event.addListener(fakeDrawer, 'circlecomplete', function (circle) {
google.maps.event.addListener(circle, 'radius_changed', function () {
updateInfo(circle);
});
});
Enjoy, hope it will help.

CSS Google Maps Custom InfoWindow

I've been using code from http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html, which is currently google's best example of how to create custom InfoWindow's in Maps API v3. I've been working on it and so far I've got it close to working except for one thing, it the div container the text content won't expand to fit the content, so it just drops off instead of expanding the bubble. if I give the content container a fixed pixel width it works fine but I can't get it to expand depending on the amount of text in it.
I've been stuck on this one for a while. Any help would be greatly appreciated!
Here is the HTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Gayborhood Map Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { width: 900px;
height: 400px;
margin: 200px auto 0 auto; }
</style>
<link rel="stylesheet" type="text/css" href="map.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="InfoBox.js"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(39.947137,-75.161824);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var gayborhood;
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var gayborhoodcoords = [
new google.maps.LatLng(39.9492017, -75.1631272),
new google.maps.LatLng(39.945423, -75.1639561),
new google.maps.LatLng(39.9450064, -75.160579),
new google.maps.LatLng(39.9487765, -75.1597468),
new google.maps.LatLng(39.9492017, -75.1631272)
];
gayborhood = new google.maps.Polygon({
paths: gayborhoodcoords,
strokeColor: "#00ff00",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#00ff00",
fillOpacity: 0.35
});
gayborhood.setMap(map);
var image = 'red_icon.png';
var myLatLng = new google.maps.LatLng(39.948883,-75.162246);
var redMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
var contentString = '<h4>Woody\'s Bar</h4>';
/*var infowindow = new google.maps.InfoWindow({
content: contentString,
disableAutoPan: true
});*/
google.maps.event.addListener(redMarker, 'mouseover', function() {
var infoBox = new InfoBox({marker: redMarker, map: map});
});
/*google.maps.event.addListener(redMarker, 'mouseout', function() {
infowindow.close();
});*/
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Here's the InfoBox.js:
/* An InfoBox is like an info window, but it displays
* under the marker, opens quicker, and has flexible styling.
* #param {GLatLng} latlng Point to place bar at
* #param {Map} map The map on which to display this InfoBox.
* #param {Object} opts Passes configuration options - content,
* offsetVertical, offsetHorizontal, className, height, width
*/
function InfoBox(opts) {
google.maps.OverlayView.call(this);
this.marker_ = opts.marker
this.latlng_ = opts.marker.getPosition();
this.map_ = opts.map;
this.offsetVertical_ = -65;
this.offsetHorizontal_ = -20;
this.height_ = 50;
//this.width_ = 159;
var me = this;
this.boundsChangedListener_ =
google.maps.event.addListener(this.map_, "bounds_changed", function() {
return me.panMap.apply(me);
});
// Once the properties of this OverlayView are initialized, set its map so
// that we can display it. This will trigger calls to panes_changed and
// draw.
this.setMap(this.map_);
}
/* InfoBox extends GOverlay class from the Google Maps API
*/
InfoBox.prototype = new google.maps.OverlayView();
/* Creates the DIV representing this InfoBox
*/
InfoBox.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
/* Redraw the Bar based on the current projection and zoom level
*/
InfoBox.prototype.draw = function() {
// Creates the element if it doesn't exist already.
this.createElement();
if (!this.div_) return;
// Calculate the DIV coordinates of two opposite corners of our bounds to
// get the size and position of our Bar
var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (!pixPosition) return;
// Now position our DIV based on the DIV coordinates of our bounds
//this.div_.style.width = this.width_ + "px";
this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
this.div_.style.height = this.height_ + "px";
this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
this.div_.style.display = 'block';
};
/* Creates the DIV representing this InfoBox in the floatPane. If the panes
* object, retrieved by calling getPanes, is null, remove the element from the
* DOM. If the div exists, but its parent is not the floatPane, move the div
* to the new pane.
* Called from within draw. Alternatively, this can be called specifically on
* a panes_changed event.
*/
InfoBox.prototype.createElement = function() {
var panes = this.getPanes();
var div = this.div_;
if (!div) {
// This does not handle changing panes. You can set the map to be null and
// then reset the map to move the div.
div = this.div_ = document.createElement("div");
div.className = "infobox";
//div.style.width = this.width_ + "px";
//div.style.height = this.height_ + "px";
var leftDiv = document.createElement("div");
leftDiv.className = "bubbleLeftDiv";
var containerDiv = document.createElement("div");
containerDiv.className = "infoboxContainer";
var contentDiv = document.createElement("div");
contentDiv.className = "infoboxContent";
var title = "Much longer title than woody's"
//var infoboxWidth = ( title.length*10 - (title.length) - 40) + "px"
//containerDiv.style.width = infoboxWidth;
//this.width_ = infoboxWidth + 47;
contentDiv.innerHTML = "<h3>" + title + "</h3>";
var rightDiv = document.createElement("div");
rightDiv.className = "bubbleRightDiv";
function removeInfoBox(ib) {
return function() {
ib.setMap(null);
};
}
google.maps.event.addListener(this.marker_, 'mouseout', removeInfoBox(this));
div.appendChild(leftDiv)
div.appendChild(containerDiv);
containerDiv.appendChild(contentDiv);
div.appendChild(rightDiv);
div.style.display = 'none';
panes.floatPane.appendChild(div);
this.panMap();
} else if (div.parentNode != panes.floatPane) {
// The panes have changed. Move the div.
div.parentNode.removeChild(div);
panes.floatPane.appendChild(div);
} else {
// The panes have not changed, so no need to create or move the div.
}
}
/* Pan the map to fit the InfoBox.
*/
InfoBox.prototype.panMap = function() {
// if we go beyond map, pan map
var map = this.map_;
var bounds = map.getBounds();
if (!bounds) return;
// The position of the infowindow
var position = this.latlng_;
// The dimension of the infowindow
var iwWidth = this.width_;
var iwHeight = this.height_;
// The offset position of the infowindow
var iwOffsetX = this.offsetHorizontal_;
var iwOffsetY = this.offsetVertical_;
// Padding on the infowindow
var padX = 40;
var padY = 40;
// The degrees per pixel
var mapDiv = map.getDiv();
var mapWidth = mapDiv.offsetWidth;
var mapHeight = mapDiv.offsetHeight;
var boundsSpan = bounds.toSpan();
var longSpan = boundsSpan.lng();
var latSpan = boundsSpan.lat();
var degPixelX = longSpan / mapWidth;
var degPixelY = latSpan / mapHeight;
// The bounds of the map
var mapWestLng = bounds.getSouthWest().lng();
var mapEastLng = bounds.getNorthEast().lng();
var mapNorthLat = bounds.getNorthEast().lat();
var mapSouthLat = bounds.getSouthWest().lat();
// The bounds of the infowindow
var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;
// calculate center shift
var shiftLng =
(iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
(iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
var shiftLat =
(iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
(iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);
// The center of the map
var center = map.getCenter();
// The new map center
var centerX = center.lng() - shiftLng;
var centerY = center.lat() - shiftLat;
// center the map to the new shifted center
map.setCenter(new google.maps.LatLng(centerY, centerX));
// Remove the listener after panning is complete.
google.maps.event.removeListener(this.boundsChangedListener_);
this.boundsChangedListener_ = null;
};
And here's the CSS:
.infobox {
border: 0px none;
position: absolute;
width: auto;
height: auto;
}
.infoboxContent {
font-family: arial, helvetica, sans-serif;
font-size: 15px;
padding: 0px;
margin: 9px 0px 0px -24px;
position: absolute;
z-index: 105;
}
.infoboxContainer {
background: url('infowindow_bg.png') repeat-x;
height: 50px;
margin-left: 47px;
}
.bubbleLeftDiv {
width: 47px;
height: 50px;
background: url('infowindow_left.png') no-repeat;
position: absolute;
z-index: 102;
}
.bubbleRightDiv {
width: 26px;
height: 50px;
background: url('infowindow_right.png') no-repeat;
position: absolute;
right: -26px;
top: 0px;
}
.clear { clear: both; }
Thank you!!
I've faced the same problem. The approach that worked for me was to dynamically determine the dimensions of the content and set the height and width of the InfoBox correctly. The problem that I encountered with this was that before the content is inserted into the DOM it doesn't have (correct) dimension values. As a result my approach was the following:
Create the DOM content element that needs to be inserted
Insert it in a temp container
Get dimensions of temp container
Remove temp container
Insert content in InfoBox and set its height and width based on temp container dimensions
Here is an example done with the jQuery framework:
var temp = $("<div class='temp'></div>").html(content).hide().appendTo("body");
var dimentions = {
width : temp.outerWidth(true),
height : temp.outerHeight(true)
};
temp.remove();
var overlayProjection = this.getProjection();
var top_left = overlayProjection.fromLatLngToDivPixel(this.point_);
var dimensions= $.extend({}, dimensions, {
y : top_left.y - dimensions.height,
x : top_left.x - dimensions.width/2
});
var div = this.div_;
$(div).css({
"top": dimensions.y + 'px',
"left" : dimensions.x + 'px',
"width" : dimensions.width + 'px',
"height" : dimensions.height + 'px'
}).html(content);
Hope that helps!
You may override the the infobox draw method and reposition the infobox after it has been rendered:
var infobox = new InfoBox(myOptions);
infobox.initReady = false;
var oldDraw = infobox.draw;
infobox.draw = function() {
oldDraw.apply(this);
if( ! infobox.initReady) {
// Calculate the required offset
var offsetY = -($(infobox.div_).outerHeight());
var offsetX = -110;
infobox.initReady = true;
// Set the new pixelOffset
infobox.setOptions({
pixelOffset: new google.maps.Size(offsetX, offsetY)
});
}
}

Categories

Resources