JS:
function initialize() {
var latLng = new google.maps.LatLng({{location_latitude}}, {{location_longitude}});
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
Map is loading at the time of page load.
Apart from that,i need it to refresh the map on a button click,namely "<button>Refresh Map</button>"
How to make the map refresh on clicking Refresh Map button.
$('button').on('click',initialize);
Related
I am working with bootstrap, php, html5 and javascript.
I want to active the following javascript code without clicking on the tab "#mymap".
So I want to simulate a click there.
$('.nav-tabs a[href="#mymap"]').on('shown.bs.tab', function(event){
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat: 48.614399, lng: 21.616646},
scrollwheel: true,
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
});
How can I create a javascript function to do that and call it from the PHP code? Or is there another way to do that?
That is a Javascript function to do that.
Change it to this:
var doClickFunct = function(){
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat: 48.614399, lng: 21.616646},
scrollwheel: true,
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
};
$('.nav-tabs a[href="#mymap"]').on('shown.bs.tab', doClickFunct});
Then whenever you want to execute it just call doClickFunct()
I am trying to setup google maps with weather + cloud layer using the gmaps api. However it is not showing up for my city.
Is it just me or the weather layer is not displaying for other cities than the default/provided in the gmaps api (Vancouver)
http://jsfiddle.net/AzriAhmad/jzfuA/1/ (Vancouver)
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(49.265984, -123.127491),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Problem: As soon as I change the coords, the layer doesn't show up..
http://jsfiddle.net/AzriAhmad/ABa2q/1/ (New York)
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.7142700 , -74.0059700),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Tried changing zoom but it didn't change anything from my side..
Edit: Fixed links
It was cached issues with my MacBook.
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
In my Rails app, the background consists of a fullscreen div with Google Maps and a traffic layer.
This is what gets called on page load:
$(function () {
updateMap();
});
The updateMap function creates a Google Map on the div element 'google_map':
function updateMap() {
var latlng = new google.maps.LatLng(52.157927, 4.704895);
var myOptions = {
zoom: 10,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("google_map"),
myOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
updateTrafficOnMap(map, trafficLayer);
}
The last call is to this function:
function updateTrafficOnMap(map, overlay)
{
overlay.setMap();
overlay = null;
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
setTimeout(function(){ updateTrafficOnMap(map, trafficLayer) }, 60000);
}
Which is supposed to update the traffic layer every minute.
Now the div is loaded correctly on page load, the layer is loaded too. However, this never updates, so there's no real time traffic information unless you reload the whole page.
Anyone knows the magic word to make the traffic layer refresh properly?
So I found the answer. Apparently you cannot update the map with a new overlay while inside the timeOut function. I do not know why exactly (as for instance a 'alert()' does show while inside the function). I solved it using a switch statement in the updateOnTrafficMap function, so that once every minute the layout disappears, and immediately reappears using another timeOut (set to 1 ms).
function updateMap() {
// the following creates a Google Map with zoom level 10 and the LatLong coordinates
// stated below
var latlng = new google.maps.LatLng(52.053335, 4.917755);
var myOptions = {
zoom: 10,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("google_map"), myOptions);
updateTrafficOnMap(map, null, 1);
}
function updateTrafficOnMap(map, trafficLayer, on)
{
if(on == 0) {
trafficLayer.setMap(null);
setTimeout(function() { updateTrafficOnMap(map, null, 1) }, 1)
}
if(on == 1) {
var trafficLayer2 = new google.maps.TrafficLayer();
trafficLayer2.setMap(map);
// after 300ms (or 5 minutes) update the traffic map
setTimeout(function() { updateTrafficOnMap(map, trafficLayer2, 0)}, 300000)
}
}
On document load you call the updateMap() function, and you should have a DIV with id "google_map" to display the map in of course.
This worked for me:
var _mainMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var _gmapTrLayer = new google.maps.TrafficLayer();
_gmapTrLayer.setMap(_mainMap);
setInterval(refreshGmapsTrafficLayer, 60000); // runs every minute
function refreshGmapsTrafficLayer() {
_gmapTrLayer.setMap(null);
_gmapTrLayer.setMap(_mainMap);
}
A setInterval over the whole initialize routine got me the refreshing that I desired. options.ts_google_map_traffic_refresh_milliseconds is set to the milliseconds you desire.
setInterval(_ts_map_initialize, options.ts_google_map_traffic_refresh_milliseconds);
function _ts_map_initialize(){
console.log('function _ts_map_initialize()')
var myLatlng = new google.maps.LatLng(options.ts_google_map_traffic_latHome,options.ts_google_map_traffic_lonHome);
var myOptions = {
zoom: ts_int_zoomLevel,
center: myLatlng,
panControl: false,
zoomControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:[{
featureType:"poi",
elementType:"labels",
stylers:[{
visibility:"off"
}]
}]
}
map = new google.maps.Map(document.getElementById('ts_google_map_traffic_canvas'), myOptions);
defaultBounds = map.getBounds();
trafficLayer = new google.maps.TrafficLayer(); //add the layer - don't view it unless user toggles button
trafficLayer.setMap(map);
}
enter code here