google-maps-api-3 - puntos - markers for google maps
Google Maps API 3: color de marcador personalizado para el marcador predeterminado(punto) (15)
He visto muchas otras preguntas similares a esta ( here , here y here ), pero todas han aceptado respuestas que no resuelven mi problema. La mejor solución que he encontrado al problema es la biblioteca StyledMarker , que le permite definir colores personalizados para los marcadores, pero no puedo usar el marcador predeterminado (el que obtiene cuando realiza una búsqueda en google maps - con un punto en el medio), simplemente parece proporcionar marcadores con una letra, o con un icono especial.
En Internet Explorer , esta solución no funciona en ssl.
Uno puede ver el error en la consola como:
SEC7111 : La seguridad de HTTPS se ve comprometida por esto ,
Solución alternativa : como uno de los usuarios aquí sugirió reemplazar chart.apis.google.com por chart.googleapis.com por la ruta URL para evitar el error de SSL.
Aquí hay una buena solución que utiliza la API de Gooogle Maps. Sin servicio externo, sin biblioteca extra. Y permite formas personalizadas y múltiples colores y estilos. La solución utiliza marcadores vectoriales, que googlemaps api llama Symbols .
Además de los pocos y limitados símbolos predefinidos, puede crear cualquier forma de cualquier color especificando una cadena de ruta SVG ( Spec .).
Para usarlo, en lugar de configurar la opción de marcador ''icono'' en la URL de la imagen, configúrelo en un diccionario que contenga las opciones de símbolo. Como ejemplo, logré crear un símbolo que es bastante similar al marcador estándar:
function pinSymbol(color) {
return {
path: ''M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'',
fillColor: color,
fillOpacity: 1,
strokeColor: ''#000'',
strokeWeight: 2,
scale: 1,
};
}
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
icon: pinSymbol("#FFF"),
});
Si tiene cuidado de mantener el punto clave de la forma en 0,0, evite tener que definir los parámetros de centrado del icono del marcador. Otro ejemplo de ruta, el mismo marcador sin el punto:
path: ''M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z'',
Y aquí tienes una bandera muy simple y de color feo:
path: ''M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z'',
También puede crear las rutas utilizando una herramienta visual como Inkscape (GNU-GPL, multiplataforma). Algunos consejos útiles:
- La API de Google solo acepta una única ruta, por lo que debe convertir cualquier otro objeto (cuadrado, circulo ...) en una ruta y unirlos como una sola. Ambos comandos en el menú Ruta.
- Para mover la ruta al (0,0), vaya al modo de edición de ruta (F2), seleccione todos los nodos de control y arrástrelos. Mover el objeto con F1, no cambiará los nodos de ruta.
- Para asegurarse de que el punto de referencia esté en (0,0), puede seleccionarlo solo y editar las coords manualmente en la barra de herramientas superior.
- Después de guardar el archivo SVG, que es un XML, ábralo con un editor, busque el elemento svg: path y copie el contenido del atributo ''d''.
Bueno, lo más cercano que he podido conseguir con el StyledMarker es this .
Sin embargo, la bala en el medio no es tan grande como la predeterminada. La clase StyledMarker simplemente construye esta URL y le pide a la API de Google que cree el marcador .
Del ejemplo de uso de clase, use "% E2% 80% A2" como texto, como en:
var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
Tendrá que modificar StyledMarker.js para comentar las líneas:
if (text_) {
text_ = text_.substr(0,2);
}
ya que esto recortará la cadena de texto a 2 caracteres.
Alternativamente, puede crear imágenes de marcador personalizadas basadas en la predeterminada con los colores que desea y anular el marcador predeterminado con un código como este:
marker = new google.maps.Marker({
map:map,
position: latlng,
icon: new google.maps.MarkerImage(
''http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png'',
new google.maps.Size(24, 24),
new google.maps.Point(0, 0),
new google.maps.Point(0, 24)
)
});
Combine un marcador symbol-based cuyo trazado dibuje el contorno, con un carácter ''●'' para el centro. Puede sustituir el punto con otro texto (''A'', ''B'', etc.) como desee.
Esta función devuelve las opciones para un marcador con el texto dado (si corresponde), el color del texto y el color de relleno. Utiliza el color del texto para el contorno.
function createSymbolMarkerOptions(text, textColor, fillColor) {
return {
icon: {
path: ''M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z'',
fillColor: fillColor,
fillOpacity: 1,
strokeColor: textColor,
strokeWeight: 1.8,
labelOrigin: { x: 0, y: -30 }
},
label: {
text: text || ''●'',
color: textColor
}
};
}
Desde la versión 3.11 de la API de Google Maps, el objeto Icon reemplaza a MarkerImage . El icono admite los mismos parámetros que MarkerImage. Incluso me pareció un poco más sencillo.
Un ejemplo podría verse así:
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
Para más información visita este sitio.
Estos son los disfraces de los marcadores circulares.
small_red:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC
small_yellow:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==
small_green:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==
small_blue:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC
small_purple:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==
Son imágenes de 9x9 png.
Una vez que estén en tu página, puedes arrastrarlos y tendrás el archivo png real.
He extendido un poco la respuesta de vokimon , haciéndola un poco más conveniente para cambiar otras propiedades también.
function customIcon (opts) {
return Object.assign({
path: ''M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'',
fillColor: ''#34495e'',
fillOpacity: 1,
strokeColor: ''#000'',
strokeWeight: 2,
scale: 1,
}, opts);
}
Uso:
marker.setIcon(customIcon({
fillColor: ''#fff'',
strokeColor: ''#000''
}));
O al definir un nuevo marcador:
const marker = new google.maps.Marker({
position: {
lat: ...,
lng: ...
},
icon: customIcon({
fillColor: ''#2ecc71''
}),
map: map
});
Hola, puedes usar el icono como SVG y establecer colores. Ver este codigo
/*
* declare map and places as a global variable
*/
var map;
var places = [
[''Place 1'', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
[''Place 2'', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
[''Place 3'', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
[''Place 4'', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
[''Place 5'', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
* use google maps api built-in mechanism to attach dom events
*/
google.maps.event.addDomListener(window, "load", function () {
/*
* create map
*/
var map = new google.maps.Map(document.getElementById("map_div"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
/*
* create infowindow (which will be used by markers)
*/
var infoWindow = new google.maps.InfoWindow();
/*
* create bounds (which will be used auto zoom map)
*/
var bounds = new google.maps.LatLngBounds();
/*
* marker creater function (acts as a closure for html parameter)
*/
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
bounds.extend(options.position);
if (html) {
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(options.map, this);
map.setZoom(map.getZoom() + 1)
map.setCenter(marker.getPosition());
});
}
return marker;
}
/*
* add markers to map
*/
for (var i = 0; i < places.length; i++) {
var point = places[i];
createMarker({
position: new google.maps.LatLng(point[2], point[3]),
map: map,
icon: {
path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
scale: 0.6,
strokeWeight: 0.2,
strokeColor: ''black'',
strokeOpacity: 1,
fillColor: point[4],
fillOpacity: 0.85,
},
}, point[1]);
};
map.fitBounds(bounds);
});
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>
Intenté durante mucho tiempo mejorar el marcador dibujado de vokimon y hacerlo más similar a uno de Google Maps (y bastante exitoso). Este es el código que tengo:
let circle=true;
path = ''M 0,0 C -0.7,-9 -3,-14 -5.5,-18.5 ''+
''A 16,16 0 0,1 -11,-29 ''+
''A 11,11 0 1,1 11,-29 ''+
''A 16,16 0 0,1 5.5,-18.5 ''+
''C 3,-14 0.7,-9 0,0 z ''+
['''', ''M -2,-28 ''+
''a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0''][new Number(circle)];
También lo escalé en 0.8.
Intento dos formas de crear el marcador de mapa de Google personalizado, este código de ejecución utilizado canvg.js es la mejor compatibilidad para el navegador. El Código de comentario finalizado no es compatible con IE11 en la actualidad.
var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];
function initMap() {
var map = new google.maps.Map(document.getElementById(''map''), {
zoom: 13,
center: {
lat: 59.325,
lng: 18.070
}
});
var markerOption = {
latitude: 59.327,
longitude: 18.067,
color: "#" + "000",
text: "ha"
};
marker = createMarker(markerOption);
marker.setMap(map);
marker.addListener(''click'', changeColorAndText);
};
function changeColorAndText() {
var iconTmpObj = createSvgIcon( "#c00", "ok" );
marker.setOptions( {
icon: iconTmpObj
} );
};
function createMarker(options) {
//IE MarkerShape has problem
var markerObj = new google.maps.Marker({
icon: createSvgIcon(options.color, options.text),
position: {
lat: parseFloat(options.latitude),
lng: parseFloat(options.longitude)
},
draggable: false,
visible: true,
zIndex: 10,
shape: {
coords: CustomShapeCoords,
type: ''poly''
}
});
return markerObj;
};
function createSvgIcon(color, text) {
var div = $("<div></div>");
var svg = $(
''<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'' +
''<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'' +
''<circle style="fill:'' + color + '';" cx="16" cy="16" r="11"/>'' +
''<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">'' + text + ''</text>'' +
''</svg>''
);
div.append(svg);
var dd = $("<canvas height=''50px'' width=''50px''></cancas>");
var svgHtml = div[0].innerHTML;
//todo yao gai bu dui
canvg(dd[0], svgHtml);
var imgSrc = dd[0].toDataURL("image/png");
//"scaledSize" and "optimized: false" together seems did the tricky ---IE11 && viewBox influent IE scaledSize
//var svg = ''<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">''
// + ''<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>''
// + ''<circle style="fill:'' + color + '';" cx="16" cy="16" r="11"/>''
// + ''<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">'' + text + ''</text>''
// + ''</svg>'';
//var imgSrc = ''data:image/svg+xml;charset=UTF-8,'' + encodeURIComponent(svg);
var iconObj = {
size: new google.maps.Size(32, 43),
url: imgSrc,
scaledSize: new google.maps.Size(32, 43)
};
return iconObj;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your Custom Marker </title>
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://canvg.github.io/canvg/canvg.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
Puede solicitar dinámicamente imágenes de iconos desde la api de Google charts con las direcciones URL:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569
Que se parece a esto: La imagen es de 21x34 píxeles y la punta del pin está en la posición (10, 34)
Y también querrá una imagen de sombra separada (para que no se superponga a los iconos cercanos):
http://chart.apis.google.com/chart?chst=d_map_pin_shadow
Que se parece a esto: La imagen es de 40x37 píxeles y la punta del pin está en la posición (12, 35).
Cuando construye su MarkerImage s necesita configurar el tamaño y los puntos de anclaje en consecuencia:
var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
Luego puedes agregar el marcador a tu mapa con:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
icon: pinImage,
shadow: pinShadow
});
Simplemente reemplace "FE7569" con el código de color que está buscando. P.ej:
Crédito debido a Jack B Nimble por la inspiración;)
Puede utilizar este código que funciona bien.
var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>
var marker = new google.maps.Marker({
position: yourlatlong,
icon: pinImage,
map: map
});
Si usa la API de Google Maps v3, puede usar setIcon por ejemplo
marker.setIcon(''http://maps.google.com/mapfiles/ms/icons/green-dot.png'')
O como parte del marcador de inicio:
marker = new google.maps.Marker({
icon: ''http://...''
});
Otros colores:
Utilice el siguiente fragmento de código para actualizar los marcadores predeterminados con diferentes colores.
(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
Usando swift y Google Maps Api v3, esta fue la forma más fácil de hacerlo:
icon = GMSMarker.markerImageWithColor(UIColor.blackColor())
Espero que ayude a alguien.
cámbielo a chart.googleapis.com para la ruta, de lo contrario SSL no funcionará