javascript - puntos - infowindow google maps v3
¿Cómo puedo crear marcadores de mapa numerados en Google Maps V3? (15)
¿Qué tal esto? (año 2015)
1) Obtener una imagen de marcador personalizada.
var imageObj = new Image();
imageObj.src = "/markers/blank_pin.png";
2) Crea un canvas en la RAM y dibuja esta imagen en él
imageObj.onload = function(){
var canvas = document.createElement(''canvas'');
var context = canvas.getContext("2d");
context.drawImage(imageObj, 0, 0);
}
3) Escribe cualquier cosa encima
context.font = "40px Arial";
context.fillText("54", 17, 55);
4) Obtener datos brutos del lienzo y proporcionarlos a Google API en lugar de URL
var image = {
url: canvas.toDataURL(),
};
new google.maps.Marker({
position: position,
map: map,
icon: image
});
Código completo:
function addComplexMarker(map, position, label, callback){
var canvas = document.createElement(''canvas'');
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "/markers/blank_pin.png";
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
//Adjustable parameters
context.font = "40px Arial";
context.fillText(label, 17, 55);
//End
var image = {
url: canvas.toDataURL(),
size: new google.maps.Size(80, 104),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(40, 104)
};
// the clickable region of the icon.
var shape = {
coords: [1, 1, 1, 104, 80, 104, 80 , 1],
type: ''poly''
};
var marker = new google.maps.Marker({
position: position,
map: map,
labelAnchor: new google.maps.Point(3, 30),
icon: image,
shape: shape,
zIndex: 9999
});
callback && callback(marker)
};
});
Estoy trabajando en un mapa que tiene múltiples marcadores en él.
Estos marcadores usan un ícono personalizado, pero también me gustaría agregar números en la parte superior. He visto cómo esto se ha logrado utilizando versiones anteriores de la API. ¿Cómo puedo hacer esto en V3?
* Nota: el atributo "título" crea una información sobre herramientas cuando se pasa el puntero del mouse sobre el marcador, pero quiero algo que se superponga a la capa de la imagen personalizada incluso cuando no estés sobre ella.
Aquí está la documentación para la clase de marcador, y ninguno de estos atributos parece ayudar: http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions
Aquí hay iconos personalizados con el estilo actualizado de "actualización visual" que puede generar rápidamente a través de una simple secuencia de comandos .vbs. También incluí un gran conjunto pregenerado que puedes usar inmediatamente con múltiples opciones de color: https://github.com/Concept211/Google-Maps-Markers
Utilice el siguiente formato al vincular a los archivos de imagen alojados en GitHub:
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png
color
rojo, negro, azul, verde, gris, naranja, púrpura, blanco, amarillo
personaje
AZ, 1-100,!, @, $, +, -, =, (% 23 = #), (% 25 =%), (% 26 = &), (blank = •)
Ejemplos:
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red1.png
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue2.png
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png
Así como lo hago en V3:
Empiezo cargando la API de Google Maps y dentro del método de devolución de llamada initialize() cargo MarkerWithLabel.js que encontré here :
function initialize() {
$.getScript("/js/site/marker/MarkerWithLabel.js#{applicationBean.version}", function(){
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(currentLat, currentLng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById(''mapholder''),
mapOptions);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < mapData.length; i++) {
createMarker(i+1, map, mapData[i]); <!-- MARKERS! -->
extendBounds(bounds, mapData[i]);
}
map.fitBounds(bounds);
var maximumZoomLevel = 16;
var minimumZoomLevel = 11;
var ourZoom = defaultZoomLevel; // default zoom level
var blistener = google.maps.event.addListener((map), ''bounds_changed'', function(event) {
if (this.getZoom(map.getBounds) > 16) {
this.setZoom(maximumZoomLevel);
}
google.maps.event.removeListener(blistener);
});
});
}
function loadScript() {
var script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
Luego creo los marcadores con createMarker() :
function createMarker(number, currentMap, currentMapData) {
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(currentMapData[0], currentMapData[1]),
map: currentMap,
icon: ''/img/sticker/empty.png'',
shadow: ''/img/sticker/bubble_shadow.png'',
transparent: ''/img/sticker/bubble_transparent.png'',
draggable: false,
raiseOnDrag: false,
labelContent: ""+number,
labelAnchor: new google.maps.Point(3, 30),
labelClass: "mapIconLabel", // the CSS class for the label
labelInBackground: false
});
}
Como agregué la clase mapIconLabel al marcador, puedo agregar algunas reglas css en mi css:
.mapIconLabel {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
font-family: ''DINNextRoundedLTProMediumRegular'';
}
Y aqui esta el resultado:
Basado en la respuesta @dave1010 pero con enlaces https actualizados.
Marcador numerado:
https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000
Marcador de texto:
https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker
Desafortunadamente no es muy fácil. Puede crear su propio marcador personalizado basado en la clase OverlayView ( un ejemplo ) y poner su propio HTML en él, incluido un contador. Esto te dejará con un marcador muy básico, que no puedes arrastrar o agregar sombras fácilmente, pero es muy personalizable.
Alternativamente, puede agregar una etiqueta al marcador predeterminado . Esto será menos personalizable, pero debería funcionar. También conserva todas las cosas útiles que hace el marcador estándar.
Puede leer más sobre las superposiciones en el artículo de Google Fun with MVC Objects .
Editar: si no desea crear una clase de JavaScript, podría usar la API de Google Chart . Por ejemplo:
Marcador numerado:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000
Marcador de texto:
http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo
Esta es la ruta rápida y sencilla, pero es menos personalizable y requiere que el cliente descargue una nueva imagen para cada marcador.
Descubrí la mejor manera de hacerlo. Use Snap.svg para crear el svg y luego use la función toDataURL () que crea los datos gráficos para incluirlos como icono. Tenga en cuenta que utilizo la clase SlidingMarker para el marcador que me da un buen movimiento del marcador. Con Snap.svg puedes crear cualquier tipo de gráficos y tu mapa se verá fantástico.
var s = Snap(100, 100);
s.text(50, 50, store.name);
// Use more graphics here.
var marker = new SlidingMarker({
position: {lat: store.lat, lng: store.lng},
map: $scope.map,
label: store.name, // you do not need this
title: store.name, // nor this
duration: 2000,
icon: s.toDataURL()
});
Es bastante factible generar iconos etiquetados en el lado del servidor, si tiene algunas habilidades de programación. Necesitará la biblioteca de GD en el servidor, además de PHP. He estado trabajando bien para mí desde hace varios años, pero es cierto que es complicado sincronizar las imágenes de los iconos.
Lo hago a través de AJAX enviando los pocos parámetros para definir el icono en blanco y el texto y el color, así como bgcolor para aplicar. Aquí está mi PHP:
header("Content-type: image/png");
//$img_url = "./icons/gen_icon5.php?blank=7&text=BB";
function do_icon ($icon, $text, $color) {
$im = imagecreatefrompng($icon);
imageAlphaBlending($im, true);
imageSaveAlpha($im, true);
$len = strlen($text);
$p1 = ($len <= 2)? 1:2 ;
$p2 = ($len <= 2)? 3:2 ;
$px = (imagesx($im) - 7 * $len) / 2 + $p1;
$font = ''arial.ttf'';
$contrast = ($color)? imagecolorallocate($im, 255, 255, 255): imagecolorallocate($im, 0, 0, 0); // white on dark?
imagestring($im, $p2, $px, 3, $text, $contrast); // imagestring ( $image, $font, $x, $y, $string, $color)
imagepng($im);
imagedestroy($im);
}
$icons = array("black.png", "blue.png", "green.png", "red.png", "white.png", "yellow.png", "gray.png", "lt_blue.png", "orange.png"); // 1/9/09
$light = array( TRUE, TRUE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE); // white text?
$the_icon = $icons[$_GET[''blank'']]; // 0 thru 8 (note: total 9)
$the_text = substr($_GET[''text''], 0, 3); // enforce 2-char limit
do_icon ($the_icon, $the_text,$light[$_GET[''blank'']] );
Se invoca al lado del cliente a través de algo como lo siguiente: var image_file = "./our_icons/gen_icon.php?blank=" + escape (icons [color]) + "& text =" + iconStr;
Es posible que desee descargar un conjunto de iconos numerados de las fuentes proporcionadas en este sitio:
Entonces deberías poder hacer lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Demo</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var locations = [
[''Bondi Beach'', -33.890542, 151.274856, 4],
[''Coogee Beach'', -33.923036, 151.259052, 5],
[''Cronulla Beach'', -34.028249, 151.157507, 3],
[''Manly Beach'', -33.80010128657071, 151.28747820854187, 2],
[''Maroubra Beach'', -33.950198, 151.259302, 1]
];
for (var i = 0; i < locations.length; i++) {
var image = new google.maps.MarkerImage(''marker'' + i + ''.png'',
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();">
<div id="map" style="width:400px; height:500px;"></div>
</body>
</html>
Captura de pantalla del ejemplo anterior:
Tenga en cuenta que puede agregar fácilmente una sombra detrás de los marcadores. Puede consultar el ejemplo en la Referencia de la API de Google Maps: marcadores complejos para obtener más información al respecto.
Esto ahora se ha agregado a la documentación de asignación y no requiere código de un tercero.
Puedes combinar estas dos muestras:
https://developers.google.com/maps/documentation/javascript/examples/marker-labels
https://developers.google.com/maps/documentation/javascript/examples/icon-simple
Para obtener un código como este:
var labelIndex = 0;
var labels = ''ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789'';
function initialize() {
var bangalore = { lat: 12.97, lng: 77.59 };
var map = new google.maps.Map(document.getElementById(''map-canvas''), {
zoom: 12,
center: bangalore
});
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, ''click'', function(event) {
addMarker(event.latLng, map);
});
// Add a marker at the center of the map.
addMarker(bangalore, map);
}
// Adds a marker to the map.
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex],
map: map,
icon: ''image.png''
});
}
google.maps.event.addDomListener(window, ''load'', initialize);
Tenga en cuenta que si tiene más de 35 marcadores, este método no funcionará ya que la etiqueta solo muestra el primer carácter (usando AZ y 0-9 hace 35). Vota por este problema de Google Maps para solicitar que se levante esta restricción.
Hice esto usando una solución similar a @ZuzEL.
En lugar de utilizar la solución predeterminada ( http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000 ), puede crear estas imágenes como desee, utilizando JavaScript, sin ningún código del lado del servidor. .
Google google.maps.Marker acepta Base64 por su propiedad de icono. Con esto podemos crear un Base64 válido a partir de un SVG.
Puede ver el código para producir lo mismo que esta imagen en este Plunker: http://plnkr.co/edit/jep5mVN3DsVRgtlz1GGQ?p=preview
var markers = [
[1002, -14.2350040, -51.9252800],
[2000, -34.028249, 151.157507],
[123, 39.0119020, -98.4842460],
[50, 48.8566140, 2.3522220],
[22, 38.7755940, -9.1353670],
[12, 12.0733335, 52.8234367],
];
function initializeMaps() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById(''map_canvas''), {
zoom: 4,
center: myLatLng
});
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(point) {
generateIcon(point[0], function(src) {
var pos = new google.maps.LatLng(point[1], point[2]);
bounds.extend(pos);
new google.maps.Marker({
position: pos,
map: map,
icon: src
});
});
});
map.fitBounds(bounds);
}
var generateIconCache = {};
function generateIcon(number, callback) {
if (generateIconCache[number] !== undefined) {
callback(generateIconCache[number]);
}
var fontSize = 16,
imageWidth = imageHeight = 35;
if (number >= 1000) {
fontSize = 10;
imageWidth = imageHeight = 55;
} else if (number < 1000 && number > 100) {
fontSize = 14;
imageWidth = imageHeight = 45;
}
var svg = d3.select(document.createElement(''div'')).append(''svg'')
.attr(''viewBox'', ''0 0 54.4 54.4'')
.append(''g'')
var circles = svg.append(''circle'')
.attr(''cx'', ''27.2'')
.attr(''cy'', ''27.2'')
.attr(''r'', ''21.2'')
.style(''fill'', ''#2063C6'');
var path = svg.append(''path'')
.attr(''d'', ''M27.2,0C12.2,0,0,12.2,0,27.2s12.2,27.2,27.2,27.2s27.2-12.2,27.2-27.2S42.2,0,27.2,0z M6,27.2 C6,15.5,15.5,6,27.2,6s21.2,9.5,21.2,21.2c0,11.7-9.5,21.2-21.2,21.2S6,38.9,6,27.2z'')
.attr(''fill'', ''#FFFFFF'');
var text = svg.append(''text'')
.attr(''dx'', 27)
.attr(''dy'', 32)
.attr(''text-anchor'', ''middle'')
.attr(''style'', ''font-size:'' + fontSize + ''px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold'')
.text(number);
var svgNode = svg.node().parentNode.cloneNode(true),
image = new Image();
d3.select(svgNode).select(''clippath'').remove();
var xmlSource = (new XMLSerializer()).serializeToString(svgNode);
image.onload = (function(imageWidth, imageHeight) {
var canvas = document.createElement(''canvas''),
context = canvas.getContext(''2d''),
dataURL;
d3.select(canvas)
.attr(''width'', imageWidth)
.attr(''height'', imageHeight);
context.drawImage(image, 0, 0, imageWidth, imageHeight);
dataURL = canvas.toDataURL();
generateIconCache[number] = dataURL;
callback(dataURL);
}).bind(this, imageWidth, imageHeight);
image.src = ''data:image/svg+xml;base64,'' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode(''0x'' + p1);
}));
}
initializeMaps();
#map_canvas {
width: 100%;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
<script src="script.js"></script>
</html>
En esta demostración, creo el SVG usando D3.js, luego transformé SVG en Canvas, así que puedo cambiar el tamaño de la imagen como quiero y después de eso obtengo Base64 del método canvas ''toDataURL.
Toda esta demostración se basó en mi código compañero @ thiago-mata . Felicitaciones por él.
La versión 3 de Google Maps tiene soporte integrado para etiquetas de marcador. Ya no es necesario generar tus propias imágenes o implementar clases de terceros. https://developers.google.com/maps/documentation/javascript/examples/marker-labels
Mis dos centavos que muestran cómo usar la API de Google Charts para resolver este problema.
No tengo suficiente reputación para comentar las respuestas, pero quería señalar que la API de Google Chart ha quedado obsoleta.
Desde la página de inicio de la API :
La porción de Infographics de Google Chart Tools se ha desaprobado oficialmente desde el 20 de abril de 2012.
Puede usar la opción Marcador con etiqueta en google-maps-utility-library-v3.
Solo consulte https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
LA SOLUCIÓN MÁS FÁCIL - UTILICE SVG
Funciona en: en IE9 , IE10 , FF, Chrome, Safari
(Si está usando otros navegadores, por favor, "Ejecute el fragmento de código" y coloque un comentario)
¡Sin dependencias externas además de la API de Google Maps!
Esto es bastante fácil siempre que tenga su icono en formato .svg . Si ese es el caso, simplemente agregue el elemento de texto apropiado y cambie su contenido para que se ajuste a sus necesidades con JS.
Agregue algo como esto a su código .svg (esta es la "sección" de texto que luego se cambiará con JS):
<text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">1</text>
Ejemplo: (parcialmente copiado de @ EstevãoLucas)
Importante: use las propiedades correctas de la etiqueta <text> . Nota text-anchor="middle" x="50%" y="28" que centra los números más largos (más información: Cómo colocar y centrar el texto en un rectángulo SVG )
Utilice encodeURIComponent() (esto probablemente garantiza la compatibilidad con IE9 y 10)
// Most important part (use output as Google Maps icon)
function getMarkerIcon(number) {
// inline your SVG image with number variable
var svg = ''<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"> <defs> <rect id="path-1" width="40" height="40"/> <mask id="mask-2" width="40" height="40" x="0" y="0" fill="white"> <use xlink:href="#path-1"/> </mask> </defs> <g id="Page-1" fill="none" fill-rule="evenodd"> <g id="Phone-Portrait---320" transform="translate(-209 -51)"> <g id="Group" transform="translate(209 51)"> <use id="Rectangle" fill="#FFEB3B" stroke="#F44336" stroke-width="4" mask="url(#mask-2)" xlink:href="#path-1"/> <text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">'' + number + ''</text> </g> </g> </g> </svg>'';
// use SVG without base64 see: https://css-tricks.com/probably-dont-base64-svg/
return ''data:image/svg+xml;charset=utf-8,'' + encodeURIComponent(svg);
}
// Standard Maps API code
var markers = [
[1, -14.2350040, -51.9252800],
[2, -34.028249, 151.157507],
[3, 39.0119020, -98.4842460],
[5, 48.8566140, 2.3522220],
[9, 38.7755940, -9.1353670],
[12, 12.0733335, 52.8234367],
];
function initializeMaps() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById(''map_canvas''), {
zoom: 4,
center: myLatLng
});
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(point) {
var pos = new google.maps.LatLng(point[1], point[2]);
new google.maps.Marker({
position: pos,
map: map,
icon: getMarkerIcon(point[0]),
});
bounds.extend(pos);
});
map.fitBounds(bounds);
}
initializeMaps();
#map_canvas {
width: 100%;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
<script src="script.js"></script>
</html>
Más información sobre SVG en línea en Google Maps: https://robert.katzki.de/posts/inline-svg-as-google-maps-marker