Develop Reference

Gmap API: Load transitLayer after initialization

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);
});
}

Changing javascript in google maps doesn't update it?

I am trying to make an AJAX map Google map, where the place markers update but not the map.
I have an ajax setup with a settimeout function, which returns new javascript. When the new javascript is loaded into my HTML, the changes do not reflect on my google map.
When I go into the firefox inspector and try and manipulate the javascript, (to try and change marker GPS coordinates), nothing happens to the map, and the points are still the same. Why does that not affect the map?
I have looked at several links to try and help me, but none of them explain the logic behind the javascript.
My PHP script returns javascript in plain text. But when these get
added to the HTML, The google map does not change and looks like it
needs to be re initialized before it recognizes new javascript?
Can someone explain how I should update the javascript, so the map re-centers on the newest marker and places the newest marker without refreshing the page / re initializing the map?
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: -20.530637, lng: 46.450046}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
new google.maps.LatLng("-21.530637,46.450046),
new google.maps.LatLng("-22.530637,46.450046),
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<div class="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function refresh_div() {
jQuery.ajax({
url:'content.php',
type:'POST',
success:function(results) {
locations=results;
jQuery(".result").html(results);
}
});
}
t = setInterval(refresh_div,5000);
</script>
My "content.php" file. returns more google maps LatLng markers in plain text.
so PHP output is:
new google.maps.LatLng("-23.530637,46.450046"),
new google.maps.LatLng("-24.530637,46.450046"),
new google.maps.LatLng("-25.530637,46.450046"),
new google.maps.LatLng("-26.530637,46.450046")

I would like to summary the behavior of your ajax map:
Initialize map (probably with a set of predefined locations)
Repeatedly call content.php to retrieve new update of markers
Draw new markers to your map
The problem is that your code that handles ajax result doesn't do any map manipulation. In fact, it has to update the variable locations with new location set. Then create new markers with updated list of locations, then call MarkerCluster to apply them.
I created a fiddle to demonstrate it: https://jsfiddle.net/anhhnt/paffzadz/1/
What I did is extract the marker creating part from initMap, so that it can be called multiple times after locations is updated.
function updateMarker () {
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
};
function initMap() {
window.map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
updateMarker(map);
};
var locations = [
{lat: -31.563910, lng: 147.154312},
{lat: -33.718234, lng: 150.363181},
{lat: -33.727111, lng: 150.371124}
]
function refresh_div() {
jQuery.ajax({
url:'/echo/json/',
type:'POST',
data: {
json: JSON.stringify([
{lat: -42.735258, lng: 147.438000},
{lat: -43.999792, lng: 170.463352}
])
},
success:function(results) {
locations.concat(results);
updateMarker();
}
});
}
t = setInterval(refresh_div,5000);
Hope it helps.

Perhaps you have simple syntax error in your code - missing closing double quote:
new google.maps.LatLng("-23.530637,46.450046"),
...
..or better - remove first double quote:
new google.maps.LatLng(-23.530637,46.450046),
...

Panoramas in Google Maps not showing

We're trying to implement panoramas to display in Google Maps in the same way as it's showing
This is an example from our website:
For some reason, on our map it does not show possible panorama locations (inside and outside). How can we get them to show there?
Our code is currently this:
<script>
var latitude = <?= $hotel->latitude ?>;
var longitude = <?= $hotel->longitude ?>;
function initialize() {
var fenway = { lat: latitude, lng: longitude };
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
},
fullScreenControl: true
};
var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), panoramaOptions );
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

From the Street View Service documentation, Street View images are supported through use of the StreetViewPanorama object, which provides an API interface to a Street View "viewer." Each map contains a default Street View panorama, which you can retrieve by calling the map's getStreetView() method. When you add a Street View control to the map by setting its streetViewControl option to true.
The StreetViewPanorama constructor also allows you to set the Street View location and point of view using the StreetViewOptions parameter. You may call setPosition() and setPov() on the object after construction to change its location and POV.
Just take NOTE that not all locations has available streetview
image, unless you created a custom one. Here is the link of the list
of currently supported cities for Street View.
For more information, read all the guides that you can find in this documentation and the samples that you can find here.

Google maps displaying jibberish

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.

Leaflet map "center" option not working

I have a map and I want to center it to concrete point. Following implementation is working correctly:
var map = L.map('map', {
crs: crs
}
);
map.setView([58.66, 25.05], 2);
However, implementation below is not working correctly and does not center the map. Why it is happening? I get just blank grey area instead of my map. According to the documentation it does completely the same as the code above.
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05)
}
);
map.setZoom(2);
Why?

I think if you specify the center option when creating the map you also have to specify the zoom option or leaflet doesn't know what tiles to request.
var map = L.map('map', {
center: L.latLng(58.66, 25.05),
zoom: 2
});
When you use setView, you are setting center and zoom so leaflet knows the tiles to request.

Have you tried
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05),
zoom: 2
});
?