how to set a button on the map - google-maps

Is it possible to set a button on the map like in this image and define it's position with Lat/Lng coordinates?
Or is there another way how to set the Position of the button?


Thanks for your comments!
The OverlayView was a little bit to complex for my purpose, so I found another solution.
let FormCH = {
path: 'M -3,-0.5 3,-0.5 3,0.5 -3,0.5 z ',
strokeColor: '#000',
strokeWeight: 2,
fillColor: '#99d126',
fillOpacity: 1,
scale: 30
};
let markerCH = new google.maps.Marker({
position: {
lat: 46.818188,
lng: 8.227511999999999
},
map: map,
draggable: false,
icon: FormCH,
label: {
text: "Switzerland " + numCH,
fontWeight: "bold",
fontSize: "20px",
color: "#fff"
}
});
I set a marker with a label text and replaced the marker icon with a svg path.
Here's the result:
code result
But as you can see, there's some space around the green box. You can resize it in "path:" or you find a way how to auto resize the box.
When I find a solution how to automatically resize the box I will post it here.

Related

Google Maps V3 Label alignment

I've created a custom marker in google maps and want to set labels on it (1 & 2), but somehow I cant position it and it always positions wrong:
(source: bilder-upload.eu)
I've already tried setting different anchors, but it seems like they wont move
var t = this,
markerConfig = {
lat: location.data('lat'),
lng: location.data('lng'),
label: location.data('id').toString(), color: 'white'
},
iconSize = 0.45,
icon = {
path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",
fillColor: '#00492C',
fillOpacity: 1,
strokeWeight: 0,
scale: iconSize,
anchor: new google.maps.Point(38, 80),
};
t.marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),
label: {
text: markerConfig.label,
color: 'red',
},
icon: icon,
})
};
I expect it to align to the center of the markers.

To change the position of the label with respect to the marker, use labelOrigin:
labelOrigin
Type: Point
The origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker. By default, the origin is located in the center point of the image.
related questions:
How to position the label inside the Marker in Google Map?
Google Maps API, add custom SVG marker with label
Google map label placement
labelOrigin: new google.maps.Point(30, 30) works with your marker (and it looks like the anchor is slightly off, anchor: new google.maps.Point(32, 80), seems to work best.
var markerConfig = {
lat: 12.97,
lng: 77.59,
label: "1",
color: 'white'
},
iconSize = 0.45,
icon = {
path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",
fillColor: '#00492C',
fillOpacity: 1,
strokeWeight: 0,
scale: iconSize,
anchor: new google.maps.Point(32, 80),
labelOrigin: new google.maps.Point(30, 30)
};
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),
label: {
text: markerConfig.label,
color: 'red',
},
icon: icon,
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 12.97,
lng: 77.59
}
});
var markerConfig = {
lat: 12.97,
lng: 77.59,
label: "1",
color: 'white'
},
iconSize = 0.45,
icon = {
path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",
fillColor: '#00492C',
fillOpacity: 1,
strokeWeight: 0,
scale: iconSize,
anchor: new google.maps.Point(32, 80),
labelOrigin: new google.maps.Point(30, 30)
};
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),
label: {
text: markerConfig.label,
color: 'red',
},
icon: icon,
});
};
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Image generator in Googlemaps

I wonder how I can generate an image, actually a small circle
with color and number as parameter in Googlemaps?
So for example
MakeImage($FF0000, 5)
Will draw a red circle with number 5 in centre.
What is the best approach without pregenerate all possible
combinations as image-files?

In order to achieve this you can create an icon as Symbol interface and combine it with MarkerLabel. Note the presense of the property labelOrigin in the Symbol interface, it defines where you will put the label.
To demonstrate this approach I used the built-in SVG path google.maps.SymbolPath.CIRCLE. Have a look at the following example and run it to see circle Marker with number.
function initMap() {
var myLatLng = {lat: 47.363362, lng: 8.485823};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!',
icon: {
fillColor: "#FF0000",
strokeColor: "#FF0000",
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
labelOrigin: new google.maps.Point(0,0)
},
label: {
text: "5",
color: "white",
fontWeight: "bold",
fontSize: "16px"
}
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
</script>
I hope this helps!

I suggest you to use custom markers, here and here you can find a well documented API and it's explained how to make markers with bitmaps and svg graphics. I suggest to use SVG path notation like this:
var map;
var my_location = { lat: 12.97, lng: 77.59 };
icon = {
//this is a string that define a circle path
path: "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0",
//this is a string that defines a hex color
fillColor: '#FF0000',
//this is a float that defines the opacity value from 0.0 to 1
fillOpacity: .6,
//this is a couple that defines a center point for the SVG
anchor: new google.maps.Point(0,0),
//this is a integer that defines the scale factor
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
});
function makeMarkerWithImageCircle(text,location){
var iconUrl = 'https://your_circl_image_url.png';
var marker = new google.maps.Marker({
position: location,
label: text,
icon: iconUrl,
map: map
});
}
function makeMarkerWithSVGCircle(text,location){
var marker = new google.maps.Marker({
position: location,
label: text,
draggable: false,
icon: icon,
map: map
});
}
//method to generate marker with custom image url and text
makeMarkerWithImageCircle("text",my_location);
//method to generate marker with custom svg and text
makeMarkerWithSVGCircle("text",my_location);
I guess you have your initMap() method wherein you initialise a Map instance
Then you can make your custom function to instantiate a custom Marker inside the Map map with a SVG as your icon property.
I didn't run this script, just wrote to explain how you can do this.
Have a nice day and I hope this was helpful (:

Google Maps API v3 - Add text to symbol

I have the following symbol code:
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeOpacity: 0,
fillColor: 'red',
fillOpacity: 1,
scale: 20
};
Which is added to a polyline like so:
m[i] = new google.maps.Polyline({
path: f0,
icons: [{
icon: lineSymbol,
offset: '50%'
}],
geodesic: true,
strokeColor: 'red',
strokeOpacity: 0.6,
strokeWeight: 5
});
This results in the following, a red circle in the centre of each polyline:
My question is, is it possible to have some text within the circle? If so, how?

I don't think this is possible yet. An alternative would be to add a marker with a clickable info window on the same spot where the symbol is.

Google Maps custom label x and y position

I am trying to adjust the x and y position of my custom label. Is this possible?
I haven't come across any documentation regarding this issue as of yet.
numberMarkerImg = {
url: '../images/mobile/map-marker.png',
size: new google.maps.Size(32, 38),
scaledSize: new google.maps.Size(32, 38)
};
// Letter markers
marker = new google.maps.Marker({
position : point,
map : map,
icon : numberMarkerImg,
draggable: false,
labelClass: "labels",
label: {
text: saved_label,
color: 'black',
fontSize: '12px',
x: '200',
y: '100'
}
});

"labelOrigin" ended up having to to be passed in since I am using a custom marker.
numberMarkerImg = {
url: '../images/mobile/map-marker.png',
size: new google.maps.Size(32, 38),
scaledSize: new google.maps.Size(32, 38),
labelOrigin: new google.maps.Point(9, 9)
};

Google Maps API v3 doesn't let you set MarkerLabel position, there're no x and y options.
The doc also says:
If you are using it with a custom marker, you can reposition it with the labelOrigin property in the Icon class.
As I can see you're using custom marker so maybe this is the way to go for you.
Alternatively, have a look at MarkerWithLabel. Is an extension to the default Marker object with more options available. Small demo: http://jsfiddle.net/LLd4drvx/239/.

Another option I don't see mentioned here. You can set a CSS class for the label, then set the position using CSS. First, add className to the label:
label: {
text: saved_label,
color: 'black',
fontSize: '12px',
className: 'marker-position',
}
And for the CSS:
.marker-position {
bottom: 6px;
left: 0;
position: relative;
}

For v3, you can use it like this. The blue pointer shown in the picture is an icon I use as svg. with the appropriate label position for this icon.
iconSVG = {
path: `M13.04,41.77c-0.11-1.29-0.35-3.2-0.99-5.42c-0.91-3.17-4.74-9.54-5.49-10.79c-3.64-6.1-5.46-9.21-5.45-12.07
c0.03-4.57,2.77-7.72,3.21-8.22c0.52-0.58,4.12-4.47,9.8-4.17c4.73,0.24,7.67,3.23,8.45,4.07c0.47,0.51,3.22,3.61,3.31,8.11
c0.06,3.01-1.89,6.26-5.78,12.77c-0.18,0.3-4.15,6.95-5.1,10.26c-0.64,2.24-0.89,4.17-1,5.48C13.68,41.78,13.36,41.78,13.04,41.77z
`,
fillColor: '#0084ff',
fillOpacity: 1,
strokeColor: '#ffffff',
strokeWeight: 1,
anchor: new google.maps.Point(14, 43),
labelOrigin: new google.maps.Point(13.5, 15)
};
This sequence is a faster way to find the right position. size, anchor, labelOrigin

SVG path ignores anchor point

The anchor: of my icon is ignored although I think the "moves" are absolute and not relative. No matter what values I supply for anchor: in my code, the SVG markers are unchanged. To be more specific, the pins are being positioned downward and to the right of where they should be. Is it because I am using bezier curves, or what?
function createMarker(point,text,ID,color,label,pinage) {
var stroke = "000000"
var icon = {
path: "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z",
fillColor: color,
fillOpacity: .8,
anchor: google.maps.Point(0.0, 0.0),
strokeWeight: 1,
scale:1.4
};
var marker = new google.maps.Marker({ position: point, map: map , title: text, icon: icon, zIndex: ID});
}

You've ommitted the new-keyword, it has to be:
anchor: new google.maps.Point(0.0, 0.0),