Simulate click on tab Bootstrap, JavaScript, Html5 - javascript

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()

Related

How to make sure that when you load the map it is always in satellite type automatically

I am trying to make my map when it loads always appear in satellite type which does not work for me, not if the line of my code is wrong.
this is my code:
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 9.150598, lng: -79.242535},
zoom: 17,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
Have you tried using a static string instead of the variable/const google.maps.MapTypeId.SATELLITE?
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 9.150598, lng: -79.242535},
zoom: 17,
mapTypeId: 'satellite'
});
According to https://developers.google.com/maps/documentation/javascript/maptypes this should work.

latLng returns null - Google maps javascript API

Ok so here is the file. It was working some days ago. I haven't really changed anything so i do not know why latLng does not work now.
here is my code
function map_initialize() {
var googleMapOptions = {
center: mapCenter, // map center
zoom: 17, //zoom level, 0 = earth view to higher value
maxZoom: 18,
minZoom: 10,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
console.log(map);
//Right Click to Drop a New Marker
google.maps.event.addListener(map, 'rightclick', function(event) {
//Drop a new Marker with location Form
create_marker(event.latLng, 'New Marker', true, true, true);
});
when i console.log(event.latLng); it returns an empty object.
console.log(event.latLng.lat());
tried with mousedown listener , it works

Change the position of a Google Maps control?

When using the Google Maps API, you can set the position of a control like this.
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.643387, 153.612224),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
I would like to set the position depending on user screen. I have a varible isMobile and tried to configure the position like this:
position: (isMobile)?google.maps.ControlPosition.BOTTOM_CENTER:position: google.maps.ControlPosition.TOP_CENTER
But this did not work. Are there other ways to achieve what I want?
Thanks!
Your syntax has an error, you are trying to add position twice.
Try it like this:
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition[isMobile?'BOTTOM_CENTER':'TOP_CENTER']
}

Map refresh on button click-Javascript

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

Removing all controls from a google map

I am trying to remove all the controls (zoom, map type drop down, and street view) from my map.
There's a method
map.removeControl(GControl)
but I haven't been able to successfully remove any default ones that I hadn't added myself.
Any tips on remove/clearing all controls from the map?
Have you tried this:
http://code.google.com/apis/maps/documentation/javascript/controls.html#DisablingDefaults
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
You may see this: google map api by w3schools
As you see in the link, this disables all controls:
var mapOptions = {disableDefaultUI: true}
and the bellow is the options to make them enabled or disabled.
var mapOptions = {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
just disableDefaultUI: true
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
disableDefaultUI: true
});
}
I believe you can create a copy of the GMapUIOptions object and then remove the items you don't want to appear.
From http://code.google.com/apis/maps/documentation/javascript/v2/controls.html#MapUIOptions
"Using the GMapUIOptions Object
The GMapUIOptions object contains a set of properties that specify control placement and UI behavior, which you may modify. For a full set of properties, see the GMapUIOptions reference.
Rather than write a GMapUIOptions structure from scratch, you may wish to prepopulate it with the UI behavior available on Google Maps. To do so, use the GMap2.getDefaultUI() method. Once populated, you can modify individual properties to tweak the behavior and initialize the map's UI controls using the GMap2.setUI() method.
The following code retrieves the default UI on a "large" map, removes the GScaleControl and resets the map to use the modified UI.
map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(400,150) } );
map.setCenter(new GLatLng(41.897997,-87.790203), 11);
var customUI = map.getDefaultUI();
customUI.controls.scalecontrol = false;
map.setUI(customUI);
"

Categories

Resources