I wonder if it's possible to change Google Maps' default marker graphic to a custom animated sequence (.gif or .swf) to achieve the same effect as Apple Maps does when showing current location via GPS:
Probably it can be done with javascript & custom overlays, but I think it won't be as smooth as Apple Maps animation. (damn js!)
As a standard, the markers use something called optimized rendering that always renders the markers as static. To see animated gifs you need to set optimized = false on your marker. The code for generating your marker would then be:
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: youricon,
optimized: false
});
And for icon similar to the one of apple Maps, you will need to have a similar gif icon.
This should solve your problem.
Related
I'm trying to display a map just like Google does here https://www.google.fr/maps
With google maps API, I'm struggling at finding the following :
makeing ctrl + drag change the tilt
programmatically setting the tilt to 0, but keep 3D imagery (for high resolution purpose basically)
programmatically setting the tilt to a custom value (say 30 degrees)
makeing ctrl + drag rotate the map
programmatically rotate the map to a custom value
Is that even possible ?
First off, the map in your link by default does not support 45 degree tilt nor rotate options, as that is a roadmap. In order to enable tilt and rotate options in your map, you will need to set your mapTypeId to "Satellite" or "Hybrid" first and set the rotateControl in your Map Object to true; this is an example adapted from Google Maps API:
function initialiseMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.390205, lng: 2.154007},
zoom: 12,
mapTypeId: 'satellite',
rotateControl: true
});
map.setTilt(45);
}
As far as I can tell from their documentation:
Google Maps JavaScript API support special 45 degree imagery for
certain location
You can set the heading option and tilt option dynamically by calling the respective method on the map object. But I do not think you can override the preset behavior programmatically unless this is something that I have missed from the documentation . This is another link to the 45 degree service for you.
if you are in 3d mode and using a desktop, you can tilt or rotate by holding SHIFT+CTRL at the same time. doesnt work in roadmap mode though
I am fairly new to Google Maps- how do I make a google maps AirBnB type marker? I am setting my markers fine, I just need to be able to create a rectangle with a background with text in it like the picture...
I have a "price" variable I can set as well.
Here's my code:
var marker = new google.maps.Marker({
position : latlng,
map : map,
label: {
text: price, // $100,000
color: 'white'
}
});
A marker Label is typically a letter or number that appears in the marker. You can put more than one letter or number, but the marker won't resize automatically to fit the text. One possible solution would be using an infowindow to display the information you want. There is some good documentation on infowindows here:
https://developers.google.com/maps/documentation/javascript/infowindows
Another alternative would be to use custom markers:
https://developers.google.com/maps/documentation/javascript/custom-markers
Google allows you to use custom markers instead of the default ones, you can follow the instructions for simple marker icons here:
https://developers.google.com/maps/documentation/javascript/markers#simple_icons
The only drawback with the custom icons is if you are listing price information like in the image you posted, you will need a custom icon for each price.
I hope this helps!
I want to create a google map marker which has an animating gif.I know google maps has 2 animation drop and bounce.I want to create one except those.Is is possible to do this. Could you lead a way?
Thanks in advance.
Per docs, in google.maps.MarkerOptions you can pass optimized: false if you want to use gif as marker icon:
optimized Type: boolean
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).
var marker = new google.maps.Marker(
{
position: myLatLng,
map: map,
optimized: false,
icon: "http://preloaders.net/preloaders/489/Classic%20map%20marker-32.gif"
});
JS fiddle: http://jsfiddle.net/T78Hd/138/
I tried integrating google maps tile layer into leaflet using leaflet-google plugin. Everything loads fine, but when i try to zoom in/out, first my custom feature layer zooms and then the google map tile layer zooms. Why don't they zoom together?
var map = new L.Map('map', {center: new L.LatLng(18.93718 , 72.79366), zoom: 10});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
and I am adding my feature layer by:
L.geoJson(inputgeoJson, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
Thanks!
The Google layer in Leaflet is a hack (a possibly illegal one), and involves using the Google Maps API within Leaflet. Since Leaflet and the Google Maps API have different zoom transition animations, you see this effect. You could use Google tiles directly in Leaflet, but that's definitely be illegal, not just maybe.
I am trying to decide if the Google Maps API is the right tool to use for me.
I have a list of places I'd like to display on a map (a map of Italy)
and I'd like that:
The map doesn't show any other label but mines, and
My places are shown as labels on the map, without any icon/pin
I saw (e.g. Changing markers icons in Google Maps application) that you can change the pin icons, but I'd like not to have any.
Style the map to remove all other labels - I like using this wizard. Note the 'More Options' link in the bottom left gives many more customization options.
To create markers with only labels, not pins, you'll need a transparent PNG to use for the marker icon. I used a 20x20 one. Tweak the icon anchor to move the label to the right spot, I found 7,7 to be reasonable. For more about custom icons, see the docs.
var marker = new google.maps.Marker({
position: markerPosition,
map: map,
icon: {
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(7, 7),
url: transparentIconURL
},
label: '1'
});
You can use a styled map with the Google Maps API v3 (or a completely custom map with your own tiles)
If you just want text labels for your places, look at the InfoBox library (this example).