is it possible to not let the markers repeat horizontally, since I only want the marker to be show on the map, and I am not repeating my map.
As you can see here, it is very anoying:
http://lsres.com/playerdb/test2.php
I currently initialize my map this way:
var map;
var mapTypeOptions = {
getTileUrl: function(coord, zoom) { if (coord.y < 0 || coord.y >= 1 << zoom || coord.x < 0 || coord.x >= 1 << zoom){ return "sam/map/samap_a.jpg"; } return "sam/map/samap_"+zoom+"_"+coord.x+"_"+coord.y+".jpg"; },
tileSize: new google.maps.Size(256, 256),
maxZoom: 2,
minZoom: 1,
name: "Map",
opacity: 1.0,
isPng: false,
alt: "Map"
};
var satTypeOptions = {
getTileUrl: function(coord, zoom) { if (coord.y < 0 || coord.y >= 1 << zoom || coord.x < 0 || coord.x >= 1 << zoom){ return "sam/map/samap_a.jpg"; } return "sam/sat/samap_"+zoom+"_"+coord.x+"_"+coord.y+".jpg"; },
tileSize: new google.maps.Size(256, 256),
maxZoom: 2,
minZoom: 1,
name: "Satelite"
};
var mapMapType = new google.maps.ImageMapType(mapTypeOptions);
var satMapType = new google.maps.ImageMapType(satTypeOptions);
function initialize() {
var myLatlng = new google.maps.LatLng(0, 0);
var myOptions = {
center: myLatlng,
zoom: 1,
streetViewControl: false,
panControl: false,
zoomControl: false,
scaleControl: false,
mapTypeControlOptions: {
mapTypeIds: ["map", "sat"]
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.mapTypes.set('map', mapMapType);
map.mapTypes.set('sat', satMapType);
map.setMapTypeId('map');
}
Thanks in advance!
When creating marker object, set optimized to false, for example:
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!',
optimized: false
});
It's because at zoom levels 1 and 2, the map has to repeat to not have blank space. The same thing happens at maps.google.com. What you can do is use zoom level 3 and 4 instead. You'll have to change your code so that the content contains more blank blue filler, but the map will no longer repeat. And the map details will still look good. Does that make sense?
There's one technique that could help, it's from this website, "Range Limiting"
http://econym.org.uk/gmap/range.htm
It's in V2, so I put together a V3 jsfiddle here.
http://jsfiddle.net/44e6y/1/
You'll see the map will not display too far away from the initial point. That is, you cannot drag the map beyond predefined limits.
However, you'll have to shrink the viewable area if you choose this method (it does nothing to the repeating markers).
Related
I want to display multiple markers with different color like this
see my demo link
In my code, I set custom color at outer side but problem at inner circle (fork and spoon)
I want circle behind fork and spoon as it is (white)
JS
var myLatlng = {
lat: 53.5617303,
lng: 9.9835443
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: myLatlng,
disableDefaultUI: true,
scrollwheel: false,
});
var $markerImage = document.querySelector('.markerImage'),
markerImageSvg = $markerImage.innerHTML || '';
myLatlng.lng -= 0.006;
['#DF6047', '#ffd454', '#88D063'].forEach(function(color) {
myLatlng.lng += 0.0099;
new google.maps.Marker({
position: myLatlng,
map: map,
clickable: false,
icon: {
anchor: new google.maps.Point(16, 16),
url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(markerImageSvg.replace('{{background}}', color))
}
Please give me any suggestions.
Remove the <style> .st1: from the SVG code.
Add the fill={{background}} to each of the paths in the SVG code.
Make the javascript replace() command replace all of the instances: markerImageSvg.replace(/{{background}}/g, color)
See updated fiddle here: https://jsfiddle.net/fzsg9pky/5/
In an e-commerce system I'm building, I want to use google maps api to show the origins of the purchases. I want the markers to be shaped as a circle, and I want that circle's size to be determined by the number of purchases made from that particular city. Let's say there were 100 orders from NYC and 200 from Boston, The Boston's circle will be twice the size.
How can I do that?
Your marker icon can be a symbol (SVG path) so you can scale it to your convenience.
The following example upscales the symbol each time you add one to the map. You can easily reuse that to your use case.
var map;
var polyLine;
var polyOptions;
var iconSize = 0.5;
function initialize() {
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0,0)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addPoint(event);
});
}
function addPoint(event) {
var icon = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: .6,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
scale: iconSize
}
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: false,
icon: icon,
zIndex : -20
});
map.panTo(event.latLng);
iconSize += .1;
}
initialize();
JSFiddle demo
How can I overlay an XYZ tile set (something like this) on Google Maps API 3? I want to overlay weather data (cloud cover...etc). Feel free to use my OpenWeatherMaps URL to test it out:
http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/{z}/{x}/{y}?hash=5
I have spent multiple days trying to figure out this seemingly simple feature.
If someone can provide a working example I would be in your debt. Feel free to check out my GitHub Gist implementation using OL3 and OSM of this weather data overlay. I'd also love to know if this is not easily achievable/requires hacks.
Thank you!
Update: Thanks to #wf9a5m75's answer, I was able to put together this jsFiddle with the solution to my problem: https://jsfiddle.net/601oqwq2/4/
ImageMapType is for your purpose.
Read here: https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
var myMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/" +
zoom + "/" + coord.x + "/" + coord.y + "?hash=5";
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 9,
minZoom: 0,
name: 'mymaptype'
});
map.mapTypes.set('mymaptype', myMapType);
map.setMapTypeId('mymaptype');
[update] Overlay the imageMapType above the current mapType
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var myMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/" +
zoom + "/" + coord.x + "/" + coord.y + "?hash=5";
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 9,
minZoom: 0,
name: 'mymaptype'
});
map.overlayMapTypes.insertAt(0, myMapType);
Improving on wf9a5m75's answer.
The overlay image tiles don't cover the underlying map when zoomed out. We can make use of a normalization function (as mentioned in the link here) to ensure they cover the whole area.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 19.0356826,
lng: 72.9112641
},
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
var myMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) {
return null;
}
var bound = Math.pow(2, zoom);
return "http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/" +
zoom + "/" + normalizedCoord.x + "/" + (bound - normalizedCoord.y - 1) + "?hash=5";
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 8,
minZoom: 0,
name: 'mymaptype'
});
// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
var y = coord.y;
var x = coord.x;
// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
var tileRange = 1 << zoom;
// don't repeat across y-axis (vertically)
if (y < 0 || y >= tileRange) {
return null;
}
// repeat across x-axis
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {
x: x,
y: y
};
}
map.overlayMapTypes.insertAt(0, myMapType);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>
I am displaying an ImageMapType as overlay over a satellite mapType base map.
The base map seems to be limiting the max zoom to 19 in my area, if I change to a Road mapType I get a a couple of more levels. I have high resolution imaginery which I am displaying in the overlay and I want to be able to zoom further. If I use the ImageMapType as base map I can zoom in all I need, but I would really like to display the satellite base map and then continue to zoom into the image even if there's no satellite imaginery available.
Is there any way of accomplishing this? The only thing I can think of is creating a custom base map.
Code is similar to this example https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay
Thanks!
My code:
var mapMinZoom = 10;
var mapMaxZoom = 25;
var zoom = 20;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-34.567426059726316, -60.34467143006623),
zoom: zoom,
mapTypeId: google.maps.MapTypeId.SATELLITE,
panControl: false,
streetViewControl: false,
maxZoom: mapMaxZoom
});
createImageLayer('imaginery', 'images')
}
function createImageLayer(key, folder) {
var mapBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-34.55771388565057, -60.367219001054764), new google.maps.LatLng(-34.55817334541287, -60.3209562599659));
var imageMapTypeLayer = new google.maps.ImageMapType({
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
name: key,
getTileUrl: function(coord, zoom) {
if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
return "http://www.maptiler.org/img/none.png";
}
var ymax = 1 << zoom;
var y = ymax - coord.y -1;
var tileBounds = new google.maps.LatLngBounds(
map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x), (coord.y) ) ),
map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x), (coord.y)))
);
// write a real condition here, so long this is always valid
if (tileBounds.intersects(tileBounds)) {
return "/static/ui/"+ folder + "/"+zoom+"/"+coord.x+"/"+y+".png";
} else {
return "http://www.maptiler.org/img/none.png";
}
},
tileSize: new google.maps.Size(256, 256)
});
map.overlayMapTypes.push(imageMapTypeLayer)
}
EDIT 1:
Up to now I have managed to overcome this by listening to the zoom_changed event and changing the base map to my imageMapType when the zoom reaches the maximum and back to satellite when the user zooms out. I wonder if there's a cleaner solution to this issue.
I have a simple ROADMAP map with markers starting in a zoom level of 17 (university campus). I want to change the map type to SATELLITE when the zoom has been changed by the user to less than 14.
Doesn't seem to work. - FIXED THAT TYPO ERROR - STILL WON'T WORK.
function initialize() {
var latlng = new google.maps.LatLng(31.792659, 35.244251);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeIds: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
//zoom changes and we get a satellite map
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
if (zoomLevel <= 14) {
map.setMapTypeId('SATELLITE');
}
});
I believe the issue is you're getting map and zmap mixed up. My guess is that you've combined this from two different examples.
Try
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
if (zoomLevel <= 14) {
map.setMapTypeId('SATELLITE');
}
});