I have a png image to place as a custom marker. Code is simple:
<script type="text/javascript">
document.write('<div id="gmap" style="width:960px; height:360px;"></div>');
var map_center = new google.maps.LatLng(xxx, xxx);
var map = new google.maps.Map( document.getElementById("gmap"), {
zoom: 11,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
streetViewControl: false,
mapTypeControl: false,
styles: [
{
featureType: 'all',
elementType: 'all',
stylers: [
{ visibility: "on" },
{ saturation: -100 }
]
}]
});
var pos;
var marker;
for(var i = 0 ; i < 10 ; i++) {
pos = new google.maps.LatLng(xxx, xxx);
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Tu jesteśmy',
icon: 'pointer.png',
optimized: false,
shadow: 'shadow.png'
});
}
</script>
My problem is, neither shadow.png nor pointer.png has any PNG proporties. Both look like gifs. How can I solve this?
The issue is that you're creating multiple markers at the same position, so while they are transparent, you have 10 stacked on top of one another which is giving the appearance of one fully opaque marker.
Here's the updated Plunker with your loop reduced to a single iteration to get my point across.
Related
I am wanting to put my own custom label over certain places on a map, take for example the image below where there is text for Albert Park Lake which is not associated with a place marker. This is an example of what I am wanting to do as I am designing an app that has a number of regions and I wanting to put the names of those regions on the map which will only be visible at certain zoom levels as to ensure there is no clutter when being viewed by the user. I had experimented with place markers but found that the text being on top of the marker was bad look and I would have had to write a function to adjust the text visibility for the zoom level to deal with the clutter of many being on the screen at once.
Cheers Jordan Smith
I suggest to convert the text you want to set to bitmap image and set this bitmap as custom marker, you may find this question useful if you want to know how to convert text to bitmap.
Here are a few things you could try:
1. Pop up multiple infowindows: https://jsfiddle.net/kjqfs0bo/
function initMap() {
const uluru = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
const contentString ="lalala";
const infowindow = new google.maps.InfoWindow({
content: contentString,
});
const infowindow2 = new google.maps.InfoWindow({
content: contentString,
});
const marker = new google.maps.Marker({
position: uluru,
map,
title: "Uluru (Ayers Rock)",
});
const marker2 = new google.maps.Marker({
position: { lat: -20.363, lng: 130.044 },
map,
title: "Uluru (Ayers Rock)",
});
infowindow.open(map, marker);
infowindow2.open(map, marker2);
}
2. Invisible markers with text label: https://jsfiddle.net/0koynbz2/1/
function createMarker() {
var canvas, context;
canvas = document.createElement("canvas");
return canvas.toDataURL();
}
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 13,
center: new google.maps.LatLng(56.1304, -106.3468),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.1304, -106.3468),
map: map,
icon: {
url: createMarker()
},
label: {
text: 'My Place',
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(56.1204, -106.3468),
map: map,
icon: {
url: createMarker()
},
label: {
text: 'My Place2',
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
});
3. Maybe try geojson, but since geojson only supports point, line and polygon. I'm not sure if there is a way to display text only.
We are currently using two google maps on one page, the first one is an aerial view, and this I can turn off draggable and it works fine. The other is an internal view of the building, when I use the same code on this, it doesnt disable draggable on mobile or on desktop, I can disable scrollwheel movement, but not draggable. The code I am using is below.
function initialize2() {
var fenway = new google.maps.LatLng(0, 0);
var mapOptions = {
center: fenway,
scrollwheel: false,
zoom: 8,
draggable: false
};
var panoramaOptions = {
position: fenway,
scrollwheel: false,
draggable: false,
<?php echo(isMobile()) ? 'draggable: false,' : ''; ?>
pov: {
heading: 180,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas2'),panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
You just need to add: draggable: false like this
// Function to initialize the map within the map div
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 27.963989, lng: -82.799957},
zoom: 14,
draggable: false
});
}
As per the title, I would like to remove the IDL and equator line from my map. I am using the following code:
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>
<script>
var locations = [
['<p>Location 1<br/> Click here for more info</p>', 64.8436, -147.7231, 1],
['<p>Location 2<br/> Click here for more info</p>', 33.4500, -112.0667, 2],
['<p>Location 3<br/> Click here for more info</p>', 34.0500, -118.2500, 3],
['<p>Location 4<br/> Click here for more info</p>', 32.7150, -117.1625, 4],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(19.4328, -99.1333),
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
I'm quite new to this, and any assistance would be much appreciated.
According to this post, you need to set some undocumented properties on a stylized map. This may remove other features beyond the IDL and equator.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(19.4328, -99.1333),
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
});
var mapStyle = [
{
featureType: "administrative",
elementType: "geometry.fill",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(mapStyle);
map.mapTypes.set('myCustomMap', styledMap);
map.setMapTypeId('myCustomMap');
See http://jsfiddle.net/stevejansen/pBh6p/
I've done pretty decent getting some google map customizations; but I'm wondering where / or what I can add below to simply change the map marker / pin / or icon. I am really seeking to just change the color; but will create an image and do it that way if I must.
Below is what I am working with; cheers/
window.onload = function() {
function initialize() {
var stylez = [
{
featureType: "all",
stylers: [
{ hue: "#c3c367" },
{ saturation: -75 }
]
},
{
featureType: "poi",
elementType: "label",
stylers: [
{ visibility: "off" }
]
}
];
var latlng = new google.maps.LatLng(34.101958, -118.327925), // toggle per data
mapOptions = {
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "Edited"]
},
zoom: 14,
center: latlng
},
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions),
styledMapType = new google.maps.StyledMapType(stylez, {name: "Edited"}),
marker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.DROP,
title:"Hello World!"
}),
infowindow = new google.maps.InfoWindow({
content: "<div><img width='50' height='50' src='assets/icos/homico.png'</div>"
});
map.mapTypes.set("Edited", styledMapType);
map.setMapTypeId('Edited');
function toggleBounce () {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
// Add click listener to toggle bounce
google.maps.event.addListener(marker, 'click', function () {
toggleBounce();
infowindow.open(map, marker);
setTimeout(toggleBounce, 1500);
});
}
// Call initialize -- in prod, add this to window.onload or some other DOM ready alternative
initialize();
};
You simply need to add
"icon": "url"
to your marker declaration. So This:
marker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.DROP,
title:"Hello World!"
})
Becomes:
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: yourIconUrl,
animation: google.maps.Animation.DROP,
title:"Hello World!"
})
I already answered a similar question here, does it solve your problem ?
You can customize your own marker using this URL :
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|00FF00|000000
chld parameter is the letter you want to appear in your marker.
After the pipe, the first RGB code if the color of the marker, the second is the background color of the marker. The last one is optional.
So you can create your marker like this :
var myPin= new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|00FF00|000000");
and use it like you want !
You need to create a MarkerImage:
var image = new google.maps.MarkerImage(img_path+'marker.png',
// This marker is 48 pixels wide by 48 pixels tall.
new google.maps.Size(24, 24),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 12,24.
new google.maps.Point(12, 24)
);
The dimensions of the image and the anchor point will put your custom icon on the correct place
And specify the icon when you create the marker:
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image,
//(...)
});
In react-native-map there is a pinColor attribute that controls what color the pin is.
<Marker
pinColor={isActive ? 'yellow' : 'red'}
key={`${markerId}-${isActive ? 'active' : 'inactive'}`}
// ... other props ...
/>
I tried doing a Google Map with multiple marker, it works without applying the Google Map style but when i set the background to grayscale it does not seem to display the map. I would like to maintain the marker colored so CSS styling is not an option. The code can be seen below
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ saturation: -20 }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var locations = [
['United States', 38.976492, -103.875732, 3],
['Europe', 54.747569, 112.421105,346.289063, 3]
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 3,
center: new google.maps.LatLng(45.92, 1.25),
mapTypeId: [google.maps.MapTypeId.ROADMAP, 'map_style']
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
This part of your code is wrong, it will prevent the map from loading:
mapTypeId: [google.maps.MapTypeId.ROADMAP, 'map_style']
mapTypeId has to be exactly 1 valid mapType, not an array .
You may remove this line completely.
When you want to draw the controls for these mapTypes, you must set the mapTypeIds-option of the mapTypeControlOptions-property instead:
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 3,
center: new google.maps.LatLng(45.92, 1.25),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
});
your map should be displayed now with the 2 desired mapType-controls.
To apply a grayscale set the saturation to -100