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
}
});
Related
I've been doing quite a bit of searching here and on Google, but it's hard to think of a good search string.
In HTML, I set the mapInit callback where I do this:
map = new google.maps.Map( elem,
{
center: { lat: 52.1, lng: 4.8 },
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
What I expected is a map just like as if the user started a new tab with maps.google.com, with just those things overruled. That doesn't happen. The tab is always a lot poorer than when I start maps 'by hand'. No search box, no right-click menus, really nothing of all these things that I so like.
Is there a way to do what I want, and if so, how?
Google Maps API lets you create a map viewer on your website.
The experience is very limited compared to the maps.google.com and there is no way to get the "full" maps experience, it's something Google still reserves to themselves.
I have a similar question to this post but I have no idea where they are getting templateId from. I haven't managed to suppress the default info window(even though I thought I put the right code in) and I don't know how to get my custom info window from my fusion table to show up. from this other guys code it looks like I need to specify a templateId so the API knows how to format the window. Right now I have the following code to initialize the map.
//CREATE AN INSTANCE OF A GOOGLE MAP
map = new google.maps.Map(document.getElementById('map'), {
//MAP BASED ON FOLLOWING CONTROLS AND THEIR OPTIONS
center: {lat:33.746828, lng:-118.299448},
zoom: 13,
rotateControl: true,
scaleControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT,
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP},
fullscreenControl: true,
fullscreenControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT}
});
var infoWindow = new google.maps.InfoWindow();
//CALL INSTANCE OF NEW LAYER ADDING IN MY FUSION TABLE
var layer = new google.maps.FusionTablesLayer({
//BASED ON A QUERY TO THE FUSION DATA AND DEFINING COORDINATES
query: {
select: "Location",
from: '1h7ZlgimMOBfutZ2dLspShafWRnNE2TlNmQgVPb1T'
},
styles: [{
markerOptions: {
iconName: "measle_turquoise"}}
],
suppressInfoWindows: true
});
google.maps.event.addListener(layer, 'click', function(e) {windowControl(e, infoWindow, map);
});
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
layer.setMap(map);
//ADD MY CUSTOM STYLE TO THE LIST OF MAP TYPES AND SET IT TO ACTIVE
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
Sorry its a lot of code. My main question is how do i find this templateId and am i missing anything else that i need to get my custom info window to show up on click of marker? thanks.
I found it but I will leave this up because it isn't that obvious. The templateId and styleId values can be found inside of your Fusion Table. From within Fusion Tables go to Tools -> Publish. Now activate the drop down for "Get Html and Javascript". Within here you will find them. I am making a custom map for my mom with different styles and i'm using all kinds of services so the code this provides is different than mine but the templateId and styleId still work. Now I just have to make my custom style not so ugly....also I wonder why it doesn't default to showing you custom style. If you are bringing in your custom data in a fusionTableLayer why not the info windows too. Im sure there is a simple answer that might have to do with more complex maps than mine(that contain more layers), but I don't readily see it.
Too get you custom info windows just plug in the values you find in your layer. For my map I put them right after
iconName: "measle_turquoise"}}
],
and boom i had my custom info windows! Hope this helps.
my ugly info windows
I tried to embed image but don't have enough slackoverflow points yet i guess
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/
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.
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 ).