Develop Reference

How to implement div as marker in to google maps api

Is there any possibilities in google maps api to implement **div* as marker. I have seen almost similar one in a national geographic website. but unfortunately keep on fail when implement that function in to my map :(
Does it work when use as opened infoindow ?
var options = {
zoom: 14,
center: mycity,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
My work http://jsfiddle.net/gbqzQ/2/
looking for something like this working demo:-http://natgeo125.appspot.com/

Google Maps Weather Layer No Longer Works Since Google Update

I understand that Google updated their map a day or two ago. Since the update, the weather layer no longer works on the webpage I am building. I have a MacBook Air with Apache server installed.
When the map loads the marker still works and the latitude and longitude are correct, but the city names no longer show nor does any of the weather features.
Here is what I have tried to fix the issue:
* I tried the three different web browsers that I have installed on my MacBook - Firefox, Safari, Google. Same issue in all three.
* I tried turning my Mac off and back on again.
* I went to the Google maps API website and according to that my coding is correct.
* If I do set the zoom property to 13, the city names will show up but no weather layer...which I understand is the proper behavior with a zoom setting of 13 or higher.
* On the Google maps API website, I copied and pasted the example code for the weather layer and it worked! They have a latitude and longitude of a country outside of the USA. I compared my coding to the example coding and my coding is the same, except for the latitude and longitude. SO, when I changed the latitude and longitude in the example coding to another location the weather layer stopped working.
Here is my code, but it seems to me that the issue is on Google's end. It was suggested that I post the question here (I already posted this question at productforums.google.com) because employee's from Google will see this question.
var map;
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(40.0157394, -105.2792435),
/*center: new google.maps.LatLng(49.265984,-123.127491),*/
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_CENTER
}
};
map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
/* Weather */
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
/* Marker & InfoWindow */
var marker = new google.maps.Marker(
{
position: mapOptions.center,
map: map
});
var text = '<div id="mapText">' + 'I live in beautiful Boulder, CO!' + '</div>';
var infowin = new google.maps.InfoWindow(
{
content: text,
pixelOffset: new google.maps.Size(0, 20)
});
infowin.open(map, marker);
google.maps.event.addListener(marker, 'click', function()
{
infowin.open(map,marker);
});
};
google.maps.event.addDomListener(window, 'load', initialize);
To work around the issue for now, I set my zoom to 13 so at least the city and street names will show, and the weather features are disabled when zoom is set to 13 or higher.
I'm pretty sure my coding is correct. Any ideas will be appreciated.

Stamen Map Toner substr error Google Maps Api

I've been using this Toner Map by Stamen for a while. I built it using Google Maps. Its been working on multiple sites for the last 5-6 months.
I just checked today as a client complained and they are all broken.
Stamen:
http://maps.stamen.com/#watercolor/12/37.7706/-122.3782
Error:
Uncaught TypeError: Object [object Array] has no method 'substr'
JS Fiddle:
http://jsfiddle.net/hnuTt/12/
Javascript:
var layer = 'toner';
var map = new google.maps.Map(document.getElementById('map'),{
center: new google.maps.LatLng(51.514635,-0.092992),
zoom: 15,
mapTypeId: layer,
scrollwheel: false,
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [layer]
}
});
map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.499405,-0.390596),
map: map
});

I had exactly the same problem with stamen and other tile providers.
Since yesterday, default Google Maps API loaded (http://maps.googleapis.com/maps/api/js?sensor=false) seems to be version 3.13, which isnt the release version and might contains bugs.
In emergency the solution is to load 3.12 version which is the release version :
http://maps.googleapis.com/maps/api/js?v=3.12&sensor=false
I haven't tried yet to find a working solution with 3.13

Using Google Maps in a web app for iPad

Is there a special way to call the Google Maps API in HTML for a web app for Mobile?
I am currently calling them in the standard way.. i.e.
<%= javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false" %>
lat = 53.80620266482967
lng = -3.205146811523491
latlng = new google.maps.LatLng(lat, lng)
options =
zoom: 6
center: latlng
mapTypeId: 'OSM'
panControlOptions:
position: google.maps.ControlPosition.TOP_RIGHT
zoomControlOptions:
position: google.maps.ControlPosition.TOP_RIGHT
mapTypeControlOptions:
mapTypeIds: ['CloudMade', 'OSM', google.maps.MapTypeId.ROADMAP]
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
position: google.maps.ControlPosition.TOP_RIGHT
#gMap = new google.maps.Map(document.getElementById("map"), options)
#gMap.mapTypes.set('OSM', osmMapType)
#gMap.mapTypes.set('CloudMade', cloudMadeMapType)
#gMap.setMapTypeId(cloudMadeMapType)
But they seem a little slow and very jolty, not as smooth as the native app... anyone done this before. I would like to have them as smooth as possible.

Doesn't matter if you use the standard way, or any other way - the map will show up anyways on pretty much any device( including iPad ), but it will most likely be "jolty" and "slow". After all, you are are running it inside a web browser.
There are, however, special jQuery plugins that can be used for developing Google Maps applications for mobile devices( e.g. jquery-ui-map ).

safari mobile geolocation and map rendering

I’m attempting to get the users location for a mobile web app, if their browser doesn’t support geolocation then send them to a default map center location. This works fine on Firefox, but when I test it on an iPhone it prompts for location usage then the map does not render. I noticed though once I close safari and reopen it the map then begins to render with the geolocation. Is this a bug in safari or something wrong in the way i am initializing my map?
function init() {
var center = new google.maps.LatLng(42.283151,-87.955098);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var loc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 11,
center: loc,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
new google.maps.Marker({
position: point,
map: map
});
});
}
else {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
}

Are you waiting long enough for the iPhone's GPS to get a fix on your location? This initial activation of location services can take a while to get an accurate location to return to the API, which explains why the subsequent load works as intended.
It might be worth your while to add some code to indicate that the HTML5 geolocation function is running (perhaps displaying a "Loading..." message after you call getCurrentPosition).
An error callback would be worthwhile as well to catch and gracefully handle and errors that occur during getCurrentPosition. You can definitely run into cases where navigator.geolocation is true but it won't trigger the success function you've defined.