Develop Reference

Google Maps Not Loading Image and Marker

This is my gmaps avscript code, i print maps as many as my data database, these gmaps are inside at collapsed div:
var maps = {!! $maps !!};
var googlemaps = [];
$.each(maps, function( key, item ) {
googlemaps[key] = new GMaps({
div: '#gmaps-' + key,
lat: item.latitude,
lng: item.longitude,
width: '100%',
height: '100%',
});
googlemaps[key].addMarker({
lat: item.latitude,
lng: item.longitude,
width: '100px',
draggable: false,
title: 'Marker'
});
googlemaps[key].setCenter( item.latitude, item.longitude );
googlemaps[ key ].setZoom( 15 );
});
The div by default is collapsed, after i open the div and show the gmaps, it's just showing blank grey maps, i try drag my map to search my marker, it only view a little part of the gmaps panel at the top left.
after i resize my browser the marker finaly can drag to center of panel but still grey.
I zoomed out/in and the image loaded, the image only loaded when i zoom in and out.
I really confused searching so many answer but not solving my problem.
Please help me..

When the map div, or it's parent, or it's parent parent (any predecessor) has display:none style, and you create the map, the map view won't initialize properly. You have to trigger resize event on map for it to reinitialize the map view.
In GMaps the google.maps.Map object is accessible using .map attribute, so your code will have to look something like this:
google.maps.event.trigger(googlemaps[key].map, "resize");
Remember to trigger it AFTER the div is visible. To be sure you can put the resize trigger into a timeout, when they click the div to display.
Side note: I am not sure if you are aware, but every map you create is a separate API call so to have multiple maps results in lot of separate API calls and if you don't have maps for business license you can hit limits pretty fast.

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

Does Google Maps KML Layer Contain Maps Center Point

I'm trying to make sure that my maps center point is with in the boundaries of a kml layer, I've not been able to find much about this but I modified some code from here which seems like it could work, but of course doesn't.
From the Google Maps API I can't tell whether or not .contains() is meant to work with kml layers, or if there is a similar method. Any ideas?
// bounds of the desired area
var kmlLayer = new google.maps.KmlLayer(kmlLayerURL, {map:map, suppressInfoWindows: true, preserveViewport:true});
google.maps.event.addListener(map, 'center_changed', function() {
if (kmlLayer.contains(map.getCenter())) {
alert("withnin kml layer bounds");
}
});

The KmlLayer has a method getDefaultViewport which will give you the default viewport for the overlay (the bounds the map will be centered on to display all the contents.
getDefaultViewport() LatLngBounds Get the default viewport for the layer being displayed.
The returned LatLngBounds has a contains method.
You can't access any of the internal content of the KmlLayer.

Google Maps Javascript API V3 how to Placemark show name only

As a Title, I want show Placemark with Name field.
Basically, google map show Placemark with blue balloons.
but i don't wanna see this blue ballons. Just show Name only like google earth.
is it possible with google maps javascript api?
=============KML===============
<Folder>
<name>Point Features</name>
<description>Point Features</description>
<Placemark>
<description><![CDATA[LABEL<BR><BR><B>ELEVATION</B> = -2147483648.0000000]]></description>
<name>lnd_a</name>
<Point>
<coordinates>126.3680042851,34.7669071990,-2147483648.000</coordinates>
</Point>
</Placemark>
<!-- MY KML FILE HAS MORE LINE -->
</Folder>
=============Script Source===============
<script type="text/javascript"src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(34.7958078334,126.4441270970);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var ctaLayer = new google.maps.KmlLayer('http://MYSITES/kml/101.kml');
ctaLayer.setMap(map);
}
In Chrome Google Map Placemark shown with blue ballons.
In Google Earth Placemark shown with just name.
These screenshot base on same KML file.
How to show only name with Google Maps in Browser??

I've never used it, but there is a library to show labels on a marker. If you used a transparent marker with a label you may get the desired outcome.
MarkerWithLabel
If that doesn't work, I used to create custom labels for markers using an OverlayView.
Create marker with custom labels in Google Maps API v3
This would be an alternative to using KML Layers I guess.

There is no implemented method to show anything else than an image there.
So 1 option could be: use the iconStyle to put there the name(an image that contains the name, this may be created by a serverside script that accepts parameters, so they don't need to be static).
Another option(using the Maps-JS-API): Instead of showing the KML-layer, parse the layer on your own and create custom overlays with the names.

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.