It there a way to add another animation on Marker which is different than DROP and BOUNCE. I would like to enlarge the marker. Thanks in advance!
<Marker
position={position}
animation={window.google.maps.Animation.DROP}
/>
Since my comment seems to resolve your issue, I'll post this as answer so that others can also see that your question already had a resolution and might help them in the future. Here's the answer:
Google Maps marker animations are only bounce and drop. If you want to enlarge a marker at runtime, you can use custom Icons instead(a small and a big one). Then use setTimeout between them. Here's a sample JavaScript fiddle.
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_orange.png',
position: myLatLng,
map: map,
title: 'Hello World!'
});
setTimeout(function(){ marker.setIcon("http://maps.google.com/mapfiles/kml/paddle/orange-blank.png") }, 3000);
}
Related
I am playing with writing a little javascript solution that would take place on mars. I would love to have the output result in a google map of a lat and long on Mars. Any thoughts? Can the following concept BE called for a location on the red planet?
`map = new google.maps.Map();`
I see stuff in the API that indicates this at lease WAS doable in v.2, but I don't know if that survived, and can't seem to scare anything relevant up to tell me if this is a possibility or a dead end.
For Earth, this looks straight forward enough.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var markerTest = {lat: -34.397, lng: 150.644};
var marker = new google.maps.Marker({
position: markerTest,
map: map
});
}
Here's an Fiddle example: https://jsfiddle.net/chakra5/qx3r12xk/
Many thanks in advance for any and all brainstorming.
my map is not rendering correctly.
I have never experienced this yet (notice the icons on the right buttons being distorted). The code used to generate the map is extremely simple:
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 43.828430, lng: 18.3445995},
zoom: 18
});
new google.maps.Marker({
position: {lat: 43.828430, lng: 18.3445995},
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9zhNUfid1PgR6FZ-g8xTp_NCqV3JvsHM&callback=initMap" async defer></script>
Any ideas?
Idk why, but when I tried your code, it worked but the map was also gray. When I pointed style="width:500px;height:500px" map become working
Okay so the problem was that I had a bad CSS rule that was interfering with google's rendering.
For reference it was 100% max width on img.
I am having a very hard time coping with AngularJS and its way of setting up maps and markers.
Right now I have the following code:
<map data-ng-model="mymapdetail" zoom="11"
center="{{item.coordinates}}" style="heigth:375px">
<div data-ng-model="mymarker"></div>
</map>
This correctly shows a centered map. Then I am trying to add a marker this way.
$scope.mymarker = new google.maps.Marker({
map: $scope.mymapdetail,
position: new google.maps.LatLng(item.coordinates),
title: woa.title
});
This code does not produce any results. Where is it wrong?
Here's working solution with marker appearing on click and this one with marker already visible - using your code (well almost - I didn't use map directive), but you should be able to adapt it to your code with very little changes.
Probably the main reason why it wasn't working in your case was using new google.maps.LatLng(item.coordinates)
Here's the code:
//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
var item = {
coordinates: [40.6423926, -97.3981926]
};
var woa = {
city: 'This is my marker. There are many like it but this one is mine.'
};
//set up map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
$scope.mymapdetail = new google.maps.Map(document.getElementById('map'), mapOptions);
//add marker
$scope.mymarker = new google.maps.Marker({
map: $scope.mymapdetail,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(item.coordinates[0], item.coordinates[1]),
title: woa.city
});
});
Let me know if it works for you.
I am using this piece of code within a Bootstrap template. I am facing issues when loading images within a Bootstrap Tab content pane.
This is the JavaScript code which I use to initialize the Map:
var latlng = new google.maps.LatLng(50, 50);
var myOptions = {
zoom: _zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Google Office!'
});
I have not found any method(s) on the internet to manually reload a Google Map instance.
Is this possible and how? Thanks!
Yes, you can 'refresh' a Google Map like this:
google.maps.event.trigger(map, 'resize');
This basically sends a signal to your map to redraw it.
You can refresh with this:
map.panBy(0, 0);
map.setZoom(map.getZoom());
For some reasons, resize trigger did not work for me, and this one worked.
I have a problem with google maps. When i firstly embeeded iframe to my page on ipad i saw buttons like streetview under the map. When i switched maps to be generated from system data, and rendering using javascript api buttons are gone?
Is there a way to show them again, is it just an options that needs to be added to map or buttons only work when using iframe?
var map;
var service;
var infowindow;
function initializeMap() {
var slocation = new google.maps.LatLng(x,y);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slocation,
zoom: 15
});
var infowindow = new google.maps.InfoWindow({
content: 'example content'
});
var marker = new google.maps.Marker({
position: slocation,
map: map,
title: ' example title'
});
infowindow.open(map, marker);
}
the buttons that i want to achive are http://imageshack.us/photo/my-images/43/buttonsuv.png/
In your code, add this option streetViewControl: true
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slocation,
zoom: 15,
streetViewControl: true
});
Have a look at this, it summarises all of the street view options.
UPDATE
After the question update, I realise you want your custom image on the street view icon.
That's not possible.
One workaround is to define a custom control on the map, and link events to it with the streetview events.
I've never done it, however you might want to have a look at this