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.
Related
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);
}
I'm creating a website, and I need to insert google map with three markers, can I make this for free, or I need to use Google API Key.
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
var uluru1 = {lat: -20.344, lng: 120.036};
var uluru2 = {lat: -20.344, lng: 125.036};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
var marker1 = new google.maps.Marker({position: uluru1, map: map});
var marker2 = new google.maps.Marker({position: uluru2, map: map});
}
</script>
As far as I know, the pricing depends on the map loadings, not on the markers. See here: https://cloud.google.com/maps-platform/pricing/
It does not matter how much Pins you show or whatever, it's just about how much your map is loaded. It's also not possible to use google maps without a credit card added to the api key. So if you go over the free limit google will charge you automatically.
If you don't like this you should have a look at other map services.
I can't get my map to zoom in, I tried to edit the zoom property with in the options object, like the normal google maps API but it doesn't work. Any ideas?
Yes, it´s possible.
For example using zoom attribute as follows:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
I am using the Gmap API to display a Google Map with a transitLayer. I am trying to improve the PageSpeed of my website. One of the things that would help is if I could load the transitLayer AFTER the Google Map is initialized. I have created a fiddle in which the Google Map is initialized with the transitLayer. Is it possible to add the transitLayer AFTER the google map is initialized?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 51.501904, lng: -0.115871}
});
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
}
I am not sure what do you mean saying AFTER the google map is initialized. I suppose you can use one of the events defined for the Map class, for example tilesloaded or idle.
https://developers.google.com/maps/documentation/javascript/reference#Map
So, the code might something like
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 51.501904, lng: -0.115871}
});
google.maps.event.addListenerOnce(map, "idle", function() {
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
});
}
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.