We have manage to create markers with custom icon where we define first the icon for e.g.
var pIcon = new google.maps.MarkerImage('alertIcon/P.png',
new google.maps.Size(15, 15));
Then we define the marker in this manner.
var marker = new google.maps.Marker({
position: point,
map: map,
icon: yIcon
});
The issue now the custom icon appear but just partial of it not the complete one as we had in V2 what could be issue here?
var pIcon = new google.maps.MarkerImage('alertIcon/P.png',
// This might be where you're running into trouble, set
// Size(w,h) to the dimensions of the image
new google.maps.Size(72, 95),
// This is the origin, probably want to keep it at 0,0
new google.maps.Point(0,0),
// This is the anchor. For Point(x,y) x should be
// half the image width and y should be the height
new google.maps.Point(36, 95)
);
An icon for a Google maps marker just needs to be a string for the URL of the icon image. Creating a MarkerImage is probably causing the Google maps api to scale down the size of your custom icon.
var pIcon = "alertIcon/P.png"
This is all you should need when defining your icon.
Related
I need to put the image into custom size polygon like in the pic. How can I get this? I think this is a bad idea.
The colored area should be filled by any image instead of color.
https://i.stack.imgur.com/qzJpu.png
Probably in your case Custom Overlay will be useful:
Check this exmaple
Code snippet:
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'https://developers.google.com/maps/documentation/' +
'javascript/examples/full/images/talkeetna.png';
// The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.
overlay = new USGSOverlay(bounds, srcImage, map);
I have a container to render a google map instance, above this container i draw (HTML) another container with a search box (Origin and Destination).
When an origin is selected, a marker is draw in the map (the same with the Destination input).
Now i need to "pan" the map to show the markers in the right side of the search box.
Now, when i put a marker i use fitbounds to make sure the marker is inside the map container, but in some occasions, the marker is draw under the searchbox.
Then i try to use "panBy" method to draw the center of the map in the right side of searchbox, but don't always work.
How can i make sure that the two markers always be visible and draw in the right side of search box?
Consider this: You need to make sure that the marker is in the right side of the map. If we get the NE coordinates along with the center, we can compare that with the marker position and easily set a new center as required.
Code:
google.maps.event.addListener(marker, 'click', function() {
var markerPos = this.getPosition(), center = map.getCenter(),
mapNE = map.getBounds().getNorthEast();
if(!(markerPos.lng() > center.lng() && markerPos.lng() < mapNE.lng())) { //marker is not on the right side
//based on center and NE calulate pos to center the marker
map.setCenter(new google.maps.LatLng(markerPos.lat(), (markerPos.lng() - (mapNE.lng() - center.lng())/2)));
}
});
I'm trying to style my markers, is there a way to change size of the marker?
var marker = new StyledMarker({
styleIcon: new StyledIcon(StyledIconTypes.MARKER,{color:"#82F56D", text:''+i+''}),
position: myLatLng,
map: map,
title: label,
zIndex: z
});
This is my code for the styledmarker in the google maps utility library. How do I make the bubbles bigger on the rounding part? My numbers are to close to the edges. I'd like to have some kind of padding or some sort?
Thanks!
According to the reference there is no such thing as a size property
or anything related to manipulate the size
With the Google Maps API (v3) I've created a custom map type for a fictional game world. By default, maps, even custom map types, repeat horizontally (see image below).
Larger Image here
Is it possible to keep the map from repeating horizontally? For my map, it does not represent a planet or spherical world, so having it repeat horizontally forever doesn't make sense at all. I have figured out how to simply not load tiles for the repeated maps on the left and right like so:
Larger Image here
HOWEVER, when you create markers, the markers still show up for all the repeated maps:
Larger Image here
Is it possible to keep the markers from repeating? Or is it possible to keep the map from repeating at all? That way I don't have to deal with markers repeating?
Work Around: Limit Panning beyond the Map Bounds
I've read various work-arounds that discuss simply limiting how far the user can pan to the left or right. This won't work for me because I have to allow the user to zoom all the way out and view the entire map at once. If they zoom all the way out, repeated markers are still visible, which is unacceptable.
Is it possible to adding a bunch of padding to the map? That way there is a large amount of space between the maps:
Larger Image here
If I was able to add enough padding, then limiting the panning would work for me, because any repeated markers could be pushed far enough away by the padding that the user would never see them.
Finally my code, pretty simple:
(note: the map tile images I'm using are not available online yet)
<!DOCTYPE html>
<html style='height: 100%'>
<head>
<link rel="stylesheet" type="text/css" href="normalize.css" />
<style>
html, body { height: 100%;}
#map_canvas { height: 1000px;}
</style>
</head>
<body style='height: 100%'>
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var options =
{
getTileUrl: function(coord, zoom)
{
// Don't load tiles for repeated maps
var tileRange = 1 << zoom;
if ( coord.y < 0 || coord.y >= tileRange || coord.x < 0 || coord.x >= tileRange )
return null;
// Load the tile for the requested coordinate
var file = 'images/zoom' + zoom + '/tile_' + zoom + '_' + (coord.x) + '_' + (coord.y) + '.jpg';
return file;
},
tileSize: new google.maps.Size(256, 256),
minZoom: 1,
maxZoom: 9,
radius: 1738000, // I got this from an example in the api, I have no idea what this does
name: 'Map',
};
var mapOptions =
{
center: new google.maps.LatLng(0,0),
zoom: 2,
backgroundColor: '#000',
streetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
var mapType = new google.maps.ImageMapType(options);
map.mapTypes.set('map', mapType);
map.setMapTypeId('map');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
title: "Test"
});
</script>
</body>
</html>
In answer to the question: Is it possible to keep the markers from repeating?
Yes.
From Google Maps JavaScript API V3 Reference (3.19), if you set the markerOptions property optimized to false for your marker, it does not repeat but only shows up on the center map.
See: https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions
So, in your code, I would modify var marker as such (adding optimized: false):
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
title: "Test"
optimized: false
});
According to Google's docs (I've added the bolding),
Optimization renders many markers as a single static element. Optimized rendering is enabled by default. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element (advanced usage only).
I set optimized to false and then looked through the page to find the id (or at least class) associated with my markers. I was going to make the "extra" markers non-visible. It turns out the elements are there but have no id or class. Just as I was contemplating other ways to identify them using jQuery, I happened to look up at my "map" and realized the "extra" markers were gone! ☺
A word of caution: based on Google's docs, I suspect this behavior (the "extra" markers not showing up) may be an unintended "feature".
Cheers,
Bruce.
Looks to me like you just need to change your starting zoom and min zoom limit.
Even google runs into repeats when you are at zoom level 1, but it doesn't let you zoom out lower than that.
Just add minZoom and maxZoom properties to your options object to limit the zooming.
You can try to put a mask on the repeated area but I didn't tried it. This looks like it can solve your problem: Apply mask to Google Map.
Update: Apply the mask only when you need it, i.e. when the zoom is the lowest. I don't think resizeing the browser window will affect anything in the map. It's also has nothing to do with the question and the problem is if the mask lays on top of the marker.
Update 2: It's seems to be possible with v2 but not with v3. In v2 you can disable horizontal copies in the projection class: Google Maps API v3 with custom map image - markers repeating horizontally.
For those who has still this problem, have a look at my solution.
1- Set the maps zoom to (2) and add marker positions (lat,long) i.e
var minZoomLevel = 2;
map.setZoom(minZoomLevel);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < result.length; i++){
var latlng = new google.maps.LatLng(result[i].Lat, result[i].Lng);
bounds.extend(latlng);
});
2- Attach a event listener on zoom changed i.e
google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
3- Attach a center changed listener (This done the trick) i.e
google.maps.event.addListener(map, 'center_changed', function()
{
checkBounds(bounds);
}
function checkBounds(allowedBounds) {
if(allowedBounds.contains(map.getCenter())) {
return;
}
var mapCenter = map.getCenter();
var X = mapCenter.lng();
var Y = mapCenter.lat();
var AmaxX = allowedBounds.getNorthEast().lng();
var AmaxY = allowedBounds.getNorthEast().lat();
var AminX = allowedBounds.getSouthWest().lng();
var AminY = allowedBounds.getSouthWest().lat();
if (X < AminX) {X = AminX;}
if (X > AmaxX) {X = AmaxX;}
if (Y < AminY) {Y = AminY;}
if (Y > AmaxY) {Y = AmaxY;}
map.setCenter(new google.maps.LatLng(Y,X));
}
Every time you change the center, it will check your points and restrict map to certain area . Setting zoom will show only one world tile, and check bound will restrict the horizontal scrolling !
I'm trying to create a map similar to this (which is using v2 of the API). I want each marker on the map to consist of an image with a frame or background behind like so.
Using the icon and shadow MarkerOptions doesn't seem to accomplish this because a markers shadow falls behind other markers icons.
You can use an excellent little library, RichMarker. Its documentation is here.
To make usage easier, you can even create your own custom marker class, something like this:
Ns.Marker = function(properties) {
RichMarker.call(this, properties);
this.setContent('<div class="three-images-marker">' +
properties.NsImage ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' +
properties.NsFrameImage ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' +
'</div>');
};
Ns.Marker.prototype = Object.create(RichMarker.prototype);
// and use it like this:
var yourFramedMarker = new Ns.Marker({
position: yourMarkerLatlng,
map: yourMap,
NsImage: 'example.com/image.png',
NsFrameImage: 'example.com/frame.png',
});
'Ns' is whatever namespace you use, if you do.
From here on it's CSS work, you can position the images as you like.
I think you'll have to merge the images with the marker backgrounds. When I was building something similar I used CSS sprites and calculated the vertical offset (vPos), based on a standard height. I just didn't bother with the shadows.
var mImage = new google.maps.MarkerImage("YOURMARKER.png",
new google.maps.Size(34, 35),
new google.maps.Point(0, vPos),
new google.maps.Point(10, 34)
);
//insert marker
marker = new google.maps.Marker({
icon: mImage,
position: new google.maps.LatLng(latitude, longitude),
map: map
});
yes, marker shadows are all placed in the separate layer - below all markers. You have to merge the background and photo into one icon image, or create a new class which would inherit from MarkerImage.