Develop Reference

how to update position of google marker

Hi all I need to update google markers position every 5sec
I have this javascript code for drawing a google markers when page loads.
I want to be able to change position of the markers every 5 sec.
Here is my code:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var image = new google.maps.MarkerImage("images/truck3.png",
new google.maps.Size(32.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 18.0)
);
var shadow = new google.maps.MarkerImage("images/shadow-truck3.png",
new google.maps.Size(51.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 18.0)
);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: image,
shadow: shadow,
title: 'Click to zoom'
});
google.maps.event.addDomListener(window, 'load', initialize);
One more thing how can I put multiple points when showing more then one marker.
I know this is probably trivial for you but I am totally new at this.
EDIT:
I am sorry but this google got me tottaly confused. So What I want to do is next. When page loads I want to retrieve and array of last positions and each of that positions will have their id so an php array would be like array[Lat][Lng][id], after that I would like to put and marker on each of that position and put it in the center of the screen. When user clicks on one marker it will automatically zoom and start putting the marker position in the center every second. And I need an id for that certain marker.
This is a similar question, it would be nice if some java guru can combine me those to to get what I need
LINK ON THE SIMILAR QUESTION

well you can get lot of support for your queries GOOGLE MAPS API V3 Documentation
there are functions like
setCenter(latlng) that changes center on run time and also the function setPosition(latlng:LatLng) to change the center of marker by this way you can change the position of your marker runtime. and for storing last locations you can use a database for it and update it as according to your requirement.

This google.maps.Marker method allows you to change the position of existing markers:
visit here setPosition(latlng:LatLng)
Create an array of the markers, loop through it updating their position.

Add this javascript function to your code ,
$(function () {
setTimeout(function () { $('#map_canvas').load(initialize); }, 50000);
})

Multiple instances of Google Maps on one page

I have a form that allows you to preview coordinates via a google map. The user can dynamically add multiple sets of coordinates to the form. The amount of coordinates are variable.
I loop through the variables with this code which I feel it has to do with loading multiple instances of google maps. The first map loads just fine, but the second map only loads one tile in the far left hand corner. IF I update the coordinates on the form, then all of the maps only show one tile in the far left hand corner.
while (tempClone != cloneCount) {
var lat_lng = new google.maps.LatLng(lat, lng);
options = {
zoom: 14,
center: lat_lng,
panControl: false,
zoomControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map[tempClone] = new google.maps.Map(document.getElementById("map"+tempClone), options);
var infowindow = new google.maps.InfoWindow({
content: inputBL[tempClone][0][1] + 'Entrance'
});
marker[tempClone] = new google.maps.Marker({
position: lat_lng,
map: map[tempClone],
title: inputBL[tempClone][0][1]
});
}
Thank you for any help!
Aaron

It almost looks like you're having trouble getting the map to resize. From what I recall this happens if the map container size changes. Can you try triggering a resize after showing the map?
google.maps.event.trigger(map, "resize");

Showing a specific location in gMAP

i want to show a map in a floating DIV. The thing i want to do is that i want to a specific location with it is first visible. for example: when it is visible i wnat to show banglore city. by default it show some of cities of USA i guess. Is it possible to do so....????

Yes, absolutely. You just have to set the map's center to the Lat Lng where you wish to initially show. For instance:
html (your DIV):
<div id='map_canvas'></div>
google map api v3 JavaScript run when onload:
var initCenter = new google.maps.LatLng(12.970214, 77.56029); //city of bangalor 12.970214, 77.56029
//create the google map and grabing the DIV
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: initCenter, //setting the city of bangalor as center point of your map
mapTypeId: google.maps.MapTypeId.ROADMAP
});
Here is the jsfiddle demo.

Google Map V3 not centering, displays only part of map

I'm developing a jQTouch-based app for the iPhone and part of it uses the Google Maps API (V3). I want to be able to pass the geolocation coordinates to the map and have it center the location with a marker. What I'm getting now is the map at the proper zoom level but the desired center-point appears in the upper-righthand corner. It's also showing only about a third of the map area (the rest is gray) and it behaves somewhat erratically when you pan or zoom. Here's the code:
var coords = { latitude : "35.510630", longitude : "-79.255374" };
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
});
BTW: It looks and behaves the same on other platforms/browsers as well.
Thoughts?
Thanks in advance,
Mark
Added
Here's a link that'll show exactly what's happening:
Screen shot of iPhone emulator

I'm guessing you're using AJAX to display the map, or have the map hidden at some point and then display it based on an action?
In this case Google doesn't know the size of the map container and it will draw only part of the map, usually off-centered.
To fix this, resize the map, then re-center on your lat/lng. Something like this:
google.maps.event.trigger(map, 'resize');
// Recenter the map now that it's been redrawn
var reCenter = new google.maps.LatLng(yourLat, yourLng);
map.setCenter(reCenter);

The solution for getting the map renedered correctly is to execute your Maps-Code on pageAnimationEnd-Event of jQTouch.
Example within Page #div:
<div id="map_canvas" style="width:100%; height:100%; min-height:400px; background:#ccc;"></div>
<script type="text/javascript">
$('#map').bind('pageAnimationEnd', function() {
var mapOptions = {
zoom: 13,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: pos
});
map.setCenter(pos);
}, function() {
console.log('Device Environment Capable of Geolocation but not Available - Geolocation failed');
}
);
} else {
console.log('Device Environment Not Capable of Geolocation - Geolocation failed');
}
});
</script>
Though, i find myself having trouble to make the Map fullscreen-height. Any help in this case is appreciated. Note that im using DataZombies bars extension for fixed footer navigation.

see my answer on Google Maps API 3 & jQTouch
basically, your #map_canvas div is not visible at the time you're constructing the map as the div it's in has been hidden by jqtouch. the api can't deal with this and get's the size wrong.
would be much easier if gmaps v3 allowed setting explicit size in the constructor (as v2 did).
anyway, delay constucting map until 'pageAnimationEnd'.

Make sure you have set the width/height of the canvas absolutely (i.e.)
$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height());
Of course that assumes you have the jqtouch toolbar up and running...

Had the same exact issue loading a map with directions after loading content with AJAX and showing and hiding the map-canvas div.
You have to trigger the resize event, like Brett DeWoody says, but I found that my global variable went out of scope and I had to refer to them, i.e. the google map variable, INSIDE my functions explicitly on the window object. Here's what I have inside my directionsService response:
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
google.maps.event.trigger(window.map, 'resize');
}

Brett DeWoody's solution worked, but as I'm showing the map in modal the only solution for me was to add setTimeout like this:
setTimeout(function() {
google.maps.event.trigger(map, 'resize');
var reCenter = new google.maps.LatLng(lat, lng);
map.setCenter(reCenter);
}, 500);
After adding setTimeout the map renders and centers perfectly.

Can ScrollWheel be disabled in a custom street view?

I am building a site and I have a page which takes an address and uses it to generate a 2D roadmap style google-map and then next to it, the street view for that address.
My problem is that these two maps span almost the entire width of the site and the user is likely to have their mouse go over it when scrolling down the page and get confused by their inability to scroll down further (while zooming into a map).
Disabling this for the 2D map was pretty strait forward
//works to disable scroll wheel in 2D map
var mapOptions = {
zoom: 12,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions );
//not working to disable scroll wheel in panorama
var panoramaOptions = {
position: results[0].geometry.location,
scrollwheel: false
};
panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions );
but the street view does not seem to allow me to disable the scroll wheel using these options and I am not able to find this issue addressed in the google-docs. Anyone know if this CAN be done or suggestions on how to approach it?

There was a feature request with Gmaps API v3 issues to add scrollwheel: false to streetview http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557. This is now fixed, just use scrollwheel: false within your StreetViewPanorama options.

I am having the same problem, when the user scrolls down using the mouse wheel, the cursor gets caught in the Google street view and starts zooming instead of scrolling down the page.
In Google Maps they provide the scrollwheel property which can disable this, but unfortunately this does not seem to be implemented in Street view.
The only workaround I found as of now is as #bennedich said in the previous answer, I placed an empty/transparent div exactly over the street view div.
I am enabling the controls when the user clicks anywhere over the street view area by using jQuery to hide this empty div (using css visibility property) on mousedown event and when the user moves his mouse out I am placing this empty div back over. Which basically means everytime the user wants to interact with the street view control he has to click it once. It's not the best solution but it's better than getting your mouse caught up when scrolling

Don't know about the javascript way, but with html and css you can place an invisible div with higher z-index over the map/streetview.

There is a patch coming up from Google to address this issue.
The fix that works for now is to set the version number explicitly to 3.25 for scrollwheel: false to work.
Example:
https://maps.googleapis.com/maps/api/js?key=XXX&v=3.25

My solution was the following. As soon as the mouse is scrolled on the street view using the "wheel" event, then do the scroll artificially and bring an overlay to the front.
$('.streetViewOverlay').click(function(e) {
$(this).addClass('streetViewOverlayClicked');
});
document.querySelector('#street-view').addEventListener("wheel", function(evt) {
$(document).scrollTop($(document).scrollTop() + evt.deltaY);
$('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});
$('#street-view').mouseleave(function() {
$('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1,
gestureHandling: 'cooperative',
scrollwheel: false
});
}
.streetViewOverlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.streetViewOverlayClicked {
z-index: 1;
}