Develop Reference

Move customized google map marker above the latitude and longitude

Please let me know how to move customized google map marker above the latitude and longitude point?
Here is the JSBIN : Link, here i have used three object arrays, just used this link to understated the coding structure,
Please let me know where i have to insert "anchor" to position customized icon?

You can use the anchor property of the icon object and add any offset you need for the marker image.
var iconObj = {
url: '/path/to/icon.png', //path to icon image
origin: new google.maps.Point(0, 0), //position of the image within a sprite
anchor: new google.maps.Point(25, 25), //position at which to anchor an icon in correspondance to the position of the marker
};
var markerObj = new google.maps.Marker({
position: point,
map: map,
icon: iconObj
});
Update:
To answer your second question 'where do I put this exactly in my code' - you should put icon as an object in drivers array instead of a string.
Here's modified working version of your code

Google Fusion Table Change individual Marker Type

I have a simple question for someone who is familiar with Google Fusion Tables. Basically I want a user to be able to change a marker style on the map by indirectly altering the numerical column that corresponds to the markerstyle type.
Specifically, I currently have a Fusion Table with approximately 7000 addresses and the corresponding map. I am wondering if there is anyway FROM THE MAP to change the marker type. Here is how I currently have it configured: I have a column in the fusion table that divides the marker types into 'buckets' that plot different marker types. Right now they are all red circles, and as i visit each location I want to individually change the marker type (so in the table I would change the 1 (which corresponds to red) to a 3 (which corresponds to green)) so that I know which houses I visited. But it isnt feasible for me to scroll down the fusion table of 7000 points and change the 1 to 3, so Im wondering if theres anyway I can change it on the map directly EITHER FROM A MAP ON A WEBPAGE OR ON THE FUSION TABLE MAP INSIDE GOOGLE.
Thank you in advance,
David

If you have a fusion table derived map on a page, you could add a button to an info window that updates a value in a the fusion table - so you could change the value from 1 to 3. Take it a bit further you could add a listener to the click on the map marker itself and change the value.
Updating a value (especially if you are an owner of the table) is straightforward (https://developers.google.com/fusiontables/docs/v1/using#updateRow or https://developers.google.com/fusiontables/docs/v1/sql-reference#updateRow) and is basically a fairly standard form of sql manipulation using HTTP to invoke the request.
UPDATE <table_id>
SET <column_name> = <value> {, <column_name> = <value> }*
WHERE ROWID = <row_id>
Adding a listener to a marker to pup up an info window with an updating button is also straightforward:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'button that call some ajax to fire off a column update' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);

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

Google map generating incorrectly

I have a program that takes in a zip code and makes a google map. The div that the map is set tohidden until the map is made. Once the map is made the div is set to display : block. The problem is that the first time the map is generated (and only the first time) it looks like this:
Once I hit the find a store button again it looks like this:
I have already tried to make a initial call to the map method (which I kept hidden until a real call is made) but this does not fix the issue. I don't want to show all my code (there is a lot) but here is how I make the map.
<div id = "map_canvas" style = " height: 300px; width: 300px;"></div>
//Creates a new center location for the google map
var latlng = new google.maps.LatLng(lat, lng);
//The options for the google map
var mapOptions = {
zoom: 7,
maxZoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Creates the new map
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Also note that both images below have the correct markers in the correct place.
Any suggestions?

this is a common problem. you need to trigger a map redraw after changing the container. most of the time this is caused by showing/hiding the div.
in v3 it's:
google.maps.event.trigger(map, 'resize')
in v2 it's:
map.checkResize()

It looks like when you initialize the map, it is completely zoomed out, which brings out the single 250x250 tile that google uses.

I would suspect that possibly an error is occurring on your first "Find Store" button click that might prevent the map creation code from being reached and executing properly.

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.