Develop Reference

Reduce Google Maps Costing and only call google maps javascript api

As everyone of us know that google maps platform has introduced new pricing model, i'm trying my best to reduce the cost of google maps service as much as possible by disabling the stuff that i'm not using on my website which is using maps service.
Here is the screenshot of last three days of costing of my google maps service as we're managing high traffic website, i think we're going to spend a lot of money on maps service.
Also i'm loading google map onto the screen only when needed and then i'm calling this function to initialise maps:
find_centre_map = new google.maps.Map(document.getElementById("find-centre-map"), {
center: {lat: -28.214739, lng: 134.657340}
, zoom: 5
, mapTypeControl: false
, gestureHandling: 'greedy'
, styles: [{featureType:"poi",elementType:"labels",stylers:[{visibility:"off"}]}]
, zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
, streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
});
After this i'm using a static json file which conatins lat,lng and marker info and loop it to show markers on google map.
Can anyone please explain me how can i disable Maps and Street View API - Dynamic maps service??
And just use Maps javascript API which is free. Check above screenshot to see map serivce usage and it's SKU pricing.
Any help to reduce map costs will be greatly appreciated.

I am not good at English, so I'm sorry in the machine translation sentences.
I am suffering from the same problem. However, I will tell you that I was able to reduce many charges for the time being. It is to turn off Street View.
find_centre_map = new google.maps.Map(document.getElementById("find-centre-map"), {
center: {lat: -28.214739, lng: 134.657340}
, zoom: 5
, mapTypeControl: false
, streetview : false
, gestureHandling: 'greedy'
, styles: [{featureType:"poi",elementType:"labels",stylers:[{visibility:"off"}]}]
, zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
});

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

How can I make a google map with user's current place with JavaScript

I checked the solution for my problem but all I get are codes made by Google assigned to a static longitude and latitude.
Here is JavaScript Code:
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
I want to make it dynamic according to the user location.

You can try this one...
http://netmera.com/location/js/geolocation.js
Adding geolocation.js script your html and then below code try.
$.geolocation.find(function(location) {
var lat = location.latitude;
var lng = location.longitude;
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});

You can fetch the longitude and latitude of your user via the HTML5 GeoLocation API (see here for example code) and pass the retrieved values.

You will need to use HTML5 Geolocation API. Number of factors: the user has to permit your website to gather info regarding you location, if he doesn't, you won't be able to gather the info. Secondly, even the info is not always accurate. In collecting the location info, the API uses a number of resources, including the location of the server dishing out the page at your current IP address, or it might use the users GPRS service if he is viewing you website in a GPRS enabled device. In either case, chances are not much that you will get the exact location, you can almost always expect an approximate location.