We Keep Coding

how to show large zoom scroll in google map api

I have to show large zoom slider option which was available in previous version of google map api (v3.21). I have already specified the version in the src of script but it won't work. Below is my code:
html, body {
height: 100%;
margin: 0;
}
<div id="googleMap" style="height: 100%;width: 1349px;"></div>
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('googleMap'), {
center: {lat: -34.397, lng: 150.644},
zoom: 2,
streetViewControl: false,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize&v=3.21&signed_in=true"></script>

The "old" pan and zoom control has been removed. If you still want that functionality, you need to create your own custom control to implement it.
Related questions (include examples of a custom pan/zoom control):
Google maps custom control always appears below the default controls (contains a custom pan control)
googlemaps api3, demogallery example “Custom Small Navigation Control” (contains a custom pan/zoom control)

The Zoom control is now just a "+" and "-" button - there is no longer
a slider. The default position of the Zoom control has changed from
TOP_LEFT to RIGHT_BOTTOM
to know more check
Zoom control
block in this link What's New in the v3.22 Map Controls

I've developed a zoom slider for IE11. It could also work for Chrome and Mozilla, updating the css properties.
https://github.com/bubango/zoom_slider_IE11

Not sure if you're still looking for a zoom slider, but I made one recently and maybe you or anyone else can use it.
Create a zoom constructor...
function ZoomControl(controlDiv, map, min, max, currentZoom) {
var controlUI = document.createElement('input');
controlUI.type = 'range';
controlUI.value = currentZoom;
controlUI.min = min;
controlUI.max = max;
controlUI.style.position = "fixed";
controlUI.style.top = "95%";
controlUI.style.left = "50%";
controlUI.style.transform = "translate(-50%, -50%)";
controlUI.style.width = "400px";
controlDiv.appendChild(controlUI);
controlUI.addEventListener('click', function() {
map.setZoom(parseFloat(controlUI.value));
});
google.maps.event.addListener(map, 'zoom_changed', function(){
controlUI.value = map.getZoom();
});
}
and use it when you create a map.
function initMap() {
//initial map options
var options = {
center: startLatLng,
zoom: 3,
minZoom: 3,
maxZoom: 15,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
}
map = new google.maps.Map(id('map'), options);
var centerControlDiv = document.createElement('div');
var centerControl = new ZoomControl(centerControlDiv, map, options.minZoom, options.maxZoom, options.zoom);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
}
Your result will have a slider that looks like the attached image.

Google Maps V3, Directions stopped working [duplicate]

i have a separate code for google maps v3. Just for show infowindow infobox in my google fusion kml layer when i click on it. Yesterday my code is work fine. i didn't make any change. but today my addListner not working. when i copy my back up project, same as code. it work again but tomorrow that happens again. My addListener not work.
here's my code
infoBubble = new InfoBubble({
map: map,
shadowStyle: 1,
padding: 5,
borderRadius: 4,
arrowSize: 20,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: false,
backgroundClassName: 'phoney',
arrowStyle: 2,
});
function get_details(mode,id,lati,lng)
{
$('#loading').show();
if (xhr != null)
{
xhr.abort();
}
xhr = $.ajax({
type: "GET",
url: "realisasi2.php?id="+id,
data: "m="+mode+"&id="+id,
success: function(ret){
ajaxres = JSON.parse(ret);
iconpos = new google.maps.LatLng(lati,lng);
psbchurndata = ajaxres.detail;
var html = psbchurndata+"<i><a class='ajax' href='#' onclick=layer22("+id+","+lati+","+lng+") style='font-family: Arial;font-size: 12px; color:#00CC29;'>Lihat Datel </a></i>";
infoBubble.setContent('<div class="infowindow"><br />'+html+'</div>');
infoBubble.setPosition(iconpos);
infoBubble.close();
infoBubble.open(map);
$('#loading').hide();
}
});
}
layer.setMap(map);
google.maps.event.addListener(layer, 'click', function(e) {
alert(JSON.stringify(e, null, 4)); //UNDIFINED not Working
var lati = e.latLng['mb'];
var lng = e.latLng['nb'];
var x = e.row['id_witel'].value;
get_details('w',e.row['id_witel'].value,lati,lng);
});
}
thank's for any help

There are no "official" properties mb and nb for a google.maps.LatLng(that's what e.latLng is) . These properties will be used internally by the API, the names of these properties may change the next moment, hour or day.
To retrieve latitude and longitude use the methods lat() and lng() of e.latLng

How Can I Get marker on current location in map in Sencha-Touch2.0

Hey friends i m new to Sencha Touch platform.
And I want to find user current location with marker please help me out. i stuck in this condition.
Is there any new good tutorial for me then please share with me..
Thanks in Advance for your time.
Ravi Patel

Nice question. I faced a similar problem before. But, later, I figured out the solution.
Here's how you can solve it.
Either use Phonegap's Geolocation API or ..
Use Ext.util.Geolocation from Sencha Touch API
Demo with Phonegap's Geolocation API
Get the geolocation via the geolocation api.
vat lat, lng;
var geoLocationOptions = { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
navigator.geolocation.getCurrentPosition(geoLocationSuccess,geoLocationError,geoLocationOptions);
function geoLocationSuccess(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
Ext.Msg.alert("Geolocation","Latitude:"+ lat +", Longitude:"+ lng);
}
function geoLocationError() {
Ext.Msg.alert('Error','Error while getting geolocation');
}
Then use the values of lat and lng to set the map's center to it as well as set the marker's position to that value.
...
...
var position = new google.maps.LatLng(lat,lng);
map = this.add({
xtype: 'map',
getLocation: true,
autoLoad: true,
mapOptions: {
zoom: 15,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
zoomControl: true,
mapTypeControl: true,
scrollwheel: true,
scaleControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
}
});
marker = new google.maps.Marker({
id: 'geoLocMarker',
position: position,
map: map.getMap(),
visible: true
});
...
...

It's a lot simpler if you just use Ext.Map.getGeo() as follows:
var geo = extmap.down("#Map").getGeo();
var currentPosition = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
As long as you have your map instantiated, it should get the current location if the browser client allows for you to obtain that.
HTH!

I have also work for simillar app using sencha touch 2.3.1
Using Ext.util.Geolocation class for get current location and automatically update the currentPosition using the following code.
Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
allowHighAccuracy: true,
frequency: '5000', // set the milliseconds for the location update
listeners: {
locationupdate: function(geo) {
latitude=Global.currentUserLocations.currentLat;
longitude=Global.currentUserLocations.currentLong;
if(Global.currentUserPositionMarker)
{
latlng1=new google.maps.LatLng(latitude, longitude);
Global.currentUserPositionMarker.setPosition(latlng1);
}
}
}
});
The above code worked for me and i have already used in my app for getting currentLocation and moved the marker into currentPosition.

Geolocation marker not appearing, Google Maps API V3

I'm building a mobile map using the Google Map API V3. The is a little different than a standard map in that I have categories of markers than you can turn on/off. Everything works great, but I can't seem to get geolocation working. I've tried every combination and code snippet I can find and at most I can get it to register the location request, but it will not display a marker there no matter what I do. I'm sure I'm doing something very simple wrong, but I'm very new to Javascript so the answer is evading me.
Here is a shortened version of my current code (contains an example of everything, but cuts out a lot of the repetitive variables). This example doesn't include the geolocation functions since I've tried so many in different ways I'm not sure which one I would even put on here. The toggleMarkers() function is what I'm using to turn on/off the markers and I'm guessing that's where the problem is for the geolocation marker being displayed. If you could show me how to implement geolocation within this code I would greatly appreciate it!
var markers = [];
function initialize() {
//Setting Map
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(45.73158,-122.636277),
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(0);
//Marker Categories
var markerBuildings = {
category: 'buildings',
}
var markerParking = {
category: 'parking',
}
// Icons
var iconBuilding = new google.maps.MarkerImage('images/building.png',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16,32));
var iconAmphitheater = new google.maps.MarkerImage('images/amphitheater.png',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16,32));
//Coordinates
//Buildings
var vmcb = new google.maps.Marker({
position: new google.maps.LatLng(45.730513,-122.638106),
map: map,
url: 'http://www.google.com/',
icon: iconBuilding,
data: markerBuildings
});
markers.push(vmcb);
var vadm = new google.maps.Marker({
position: new google.maps.LatLng(45.730899,-122.637742),
map: map,
url: 'http://www.google.com/',
icon: iconBuilding,
data: markerBuildings
});
markers.push(vadm);
}
function toggleMarkers(attr,val) {
if (markers){
for (i in markers) {
if(markers[i].data[attr] == val){
var visibility = (markers[i].getVisible() == true) ? false : true;
markers[i].setVisible(visibility);
}
}
}
}

If you could show me how to implement geolocation within this code I would greatly appreciate it!
call getGeoLocation() (below) after you create the map object
function getGeoLocation() {
// http://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt
var options = null;
if (navigator.geolocation) {
if (!browserChrome) {
// By using the 'maximumAge' option, the position
// object is guaranteed to be at most 15 seconds old.
// FF and Safari seem to like these options; Chrome does not
options={enableHighAccuracy: false, maximumAge: 15000, timeout: 30000};
}
else {
// Request a position. We only accept cached positions, no matter what
// their age is. If the user agent does not have a cached position at
// all, it will immediately invoke the error callback.
// http://dev.w3.org/geo/api/spec-source.html
// Chrome will not allow this submitted via the file:// protocol
options={maximumAge:Infinity, timeout:0};
}
navigator.geolocation.getCurrentPosition(function(position) {
centerIsSet = true
canGeolocate = true;
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(pos);
},
getGeoLocationErrorCallback(true),
options);
}
else {
// browser doesn't support geolocation
getGeoLocationErrorCallback(false);
}
}

Bing! Map How to create an info box popup

I have a pin on my Bing! version 7 map although I'm failing to find out how to create an onclick event to display an info box !
Can anyone point me in the right direction or provide an example?
I have the following code so far! I need the popup to overlay the map panel.
Many thanks as always!
var map = null;
function GetMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'xxx' });
map.entities.clear();
var pushpinOptions = { icon: 'icon.png', width: 53, height: 61 };
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
var infoboxOptions = {title:'Infobox Title', description:'Infobox description'};
var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );
map.entities.push(defaultInfobox);
map.entities.push(pushpin);
}

Here's an example from MSDN
http://msdn.microsoft.com/en-us/library/gg508987.aspx

This page on the Bing sdk site has plenty of example with the code samples below the map:
http://www.bingmapsportal.com/isdk/ajaxv7