My map redraws seem to be failing because (at the least) I have been dynamically setting the center via
var currCenter = gmap.getCenter();
Then:
var mapOptions = {
center: new google.maps.LatLng(currCenter.ob, currCenter.pb),
zoom: currZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Appears currCenter.ob is suddenly undefined this morning. It now looks like it's pb & qb instead of ob & pb. I'm in the process of trying to fix the code, is there anything else anyone knows of that was changed?
EDIT: They're undocumented API fields I shouldn't be using, nevermind I fixed it with the info below. Thanks.
I am assuming gmap is a google map object. If that is the case, then getCenter already returns a LatLng object, so creating a new object via
new google.maps.LatLng()
Is somewhat useless, you could simply use currCenter directly.
The problem is that Api Google maps constantly changing this values (ob, .pb) to Latitude and Longitude, you must use lat() and lng() functions to have a stable version
var mapOptions = {
center: new google.maps.LatLng(currCenter.lat(), currCenter.lng()),
zoom: currZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
greetings!
To answer you question. YES. Google Maps API did changed last night. I was doing the same thing you did (calling .ob and .pb), but found that I had to change them to .pb and .qb in my code respectively in order to get the Lat and Long.
Rewrote them as .lng() and .lat() instead of .ob, .pb, .qp. I believe that these members should be more stable if you still want to use unofficial member names.
Related
I've been working with the Google Maps Javascript API for several weeks now. I've been having trouble accessing a property of a geoJSON after it has been added to the map and becomes a feature of the map.
For example, lets say I have this sample geoJSON
var geo = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"country","properties":
{"name":"ExampleCountry"},"geometry": {exampleGeometry}}
]};
Lets say I load the geoJSON and want to access the id property of the feature I have just added. Neither feature.id nor feature.getProperty('id') works in this case. From debugging, I found out that I can access the 'id' property via feature.F. That solution was working fine for several weeks, but for whatever reason, last week it ceased to work. I instead have to use feature.K to access the ID property.
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
map = new google.maps.Map(document.getElementById('map-canvas'), {mapOptions});
map.data.loadGeoJson(geo);
map.data.forEach(function(feature) {
//Used to Work, randomly stopped working last week (feature.F is undefined)
var id = feature.F;
//New Solution
var id = feature.K;
});
This doesn't seem to be a permanent solution. Does anyone have any idea how this could have happened?
The id of a feature is not a "property" in the meaning of geoJSON.
There is a getter-method for the id of a feature, use:
feature.getId()//should return 'country'
When you want to get a property(stored in the properties-member) use e.g.
feature.getProperty('name')//should return 'ExampleCountry'
here is my code in html to generate marker and infowindow(with ruby on rails)
var marker=[]
function initMap() {
var latLng1 = new google.maps.LatLng(1.352083, 103.819836);
var myOptions = {
zoom: 12,
center: latLng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
for(i=0;i<gon.astatic.length;i++){
var latLng = new google.maps.LatLng(gon.astatic[i][1], gon.astatic[i][2]);
if(i<2){
marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/green_MarkerV.png" ,labelClass: "labels",labelContent: gon.astatic[i][3]});}
else
{
marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/green_MarkerN.png" ,labelClass: "labels",labelContent: gon.astatic[i][3]});
}
var iw =new google.maps.InfoWindow({content: 'HI' });
google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);})
}
this gon is just some 'stupid' method I use to pass data from ruby on rails controller to javascript.
for all marker,the infowindow all appear at corner.
But for my another map(which have only one marker with infowindow)it works fine.
What might be my problem?why this infowindow appear in wrong position?Instead of just above the marker?
EDIT:
After half day's trouble shoot,I feel the problem is at
google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);})
when the listener calls back,the value inside marker is i ,which is not a actual number,so the marker display at a corner.I feel the problem is can't pass variable into addListener,can only put in actual number.How to solve this?
Each instance of the function declared inside the for loop shares the same closure containing the value i, and so all of your addListener calls are essentially calling iw.open(map, undefined) since i will be off the end of the array at the end of the iteration.
See JavaScript closure inside loops – simple practical example for sample solutions to this problem, and How do JavaScript closures work for more information about closures in JavaScript in general.
The problem is with your MarkerWithLabel library. Infowindow take position from marker. Try use this link http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html . It has all the things that you want to implement. It it's not work then you can also set position for infowindow with setPosition() function just pass latlng that you used to create marker and you are done.
i dont recommend using new gem just to pass data from ruby to js...you can do this simply by many ways...your code seems good but i cannot say how gon is handling your js script.Please take a look at this similar question where i have implemented the same dynamic map with dynamic markers and infowindows.This code is working great
see here
Bit of a strange one - I created a google maps area for a contact page on a site I'm working on. All worked fine voila etc. I went back to change some more stuff on the page today and the icon has completely disappeared. The map still generates and displays fine - only the icon is missing. My img path is still correct and nothing else has changed. I seemed to vaguely remember this happening during original build but it may have fixed itsself. Has anyone else came across similar things?
My JS for the map is here - When I deliberately change to a non existent or non valid var the map wont generate so I;m not entirely certain it is an error with this code.
any help would be massively appreciated. Thanks,
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.865151,-2.234739);
var settings = {
zoom: 16,
center: latlng,
mapTypeControl: true,
scrollwheel: false,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyLogo = new google.maps.MarkerImage('img/gmap-icon.png',
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyPos = new google.maps.LatLng(51.865151,-2.234739);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyLogo,
title:"10 Yetis HQ"
});
}
</script>
I think you have a problem with browser cache. Clear your cache every time to make a change of you will be seeing a mixed version of changes.
Also, because you are using javascript, most paths are not relative. Try using absolute urls. For example:
var companyLogo = new google.maps.MarkerImage('/img/gmap-icon.png', ...);
I faced a similar situation like this , try to change icon path directly to the physical path
Icon: "images/greymarker.png"
or else you can even use
companyMarker.setIcon("images/bluedot.png");
Hope this helps :D
thank you both for the answers :) unfortunately it was something more simple. My JS was executing before my dvi had been rendered in the DOM - I noticed a few errors in the JS console on Chrome and sorted it. thank you both!!
I have a program that I want to use google maps for. The problem is I get an error that says a is null where a is a var used in the google map api. Here is how I call my google map:
//Creates a new center location for the google map
var latlng = new google.maps.LatLng(centerLatitude, centerLongitude);
//The options for the google map
var myOptions = {
zoom: 7,
maxZoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Creates the new map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
And here is what my HTML tag looks like:
<div id = "map_canvas"></div>
I get the lat and lng on page load through the url. These values are passed in correctly so I know that is not the problem. I think that it has to do with the var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); not being correct. Any suggestions?
EDIT: Here is the error message:
a is null
fromLatLngToPoint(a=null)
yg(a=null, b=Object { zoom=7, maxZoom=12, more...})
d(d=Document Default.aspx?lat=30.346317&lng=105.46313, f=[function()])
d(a=undefined)
d()
[Break On This Error] function Qf(a){a=a.f[9];return a!=i?a:...);function sg(a){a[ic]&&a[ic]Vb}
Make sure you specify the size of the element that holds the map. For example:
<div id="map_canvas" style="width: 500px; height: 500px;"></div>
Also make sure your map variable is defined in the global scope and that
you initialize the map once the DOM is loaded.
You are probably not listening for the onload event that fires when the page is completely loaded. As a result, your script is running but the div you are creating doesn't yet exist. Use jQuery to listen for this event, like so:
$(document).ready(function () {
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
If you don't want to use jQuery, then add an event listener to body.onload
This rather cryptic error means that the script can't find the map div.
This could happen for a couple of reasons.
1. You're using the wrong ID to refer to the map.
Check your ids (or classes) and make sure the element you're referring to actually exists.
2. You're executing the script before the DOM is ready.
Here's a jQuery example. Notice we're triggering initialise on document ready, not onDOMReady. I've taken the liberty of wrapping the script in a closure.
(function($) {
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
$(document).ready(initialize);
})(jQuery)
You could also use:
google.maps.event.addDomListener(window, 'load', initialize);
if you prefer a Google solution.
Had the exact same problem and this is have i fixed it for me.
The thing was that I had 2 google maps in my website - one in the footer and the other one on the contact page, but i called them both in one JS file like so:
var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
But the thing is that the object with id="map-canvas" was located only on the contact page.
So at first you have to check if that element exists on the page like so:
if ($("#map-canvas-footer").length > 0){
var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
}
if ($("#map-canvas").length > 0){
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
}
I hope this can help someone else as well ;)
This happens when the map is not yet loaded. You should build your map when the Maps API JavaScript has loaded. Executing the function to initialize your map only when the API has fully loaded passing it to the "callback" parameter in the Maps API bootstrap.
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
This is actually in the Maps API Docs here. Hope this helps!
Make sure that your canvas div (Div associated with the map) exists.
Sometimes, if we rename the div's id attribute.
Then it creates problem as it does not get the canvas div.
I got this error once. Make sure the map script runs only on pages using the map. You can check if the map exists by using an "if". Something like this:
if ($('mapClass').length>0) { // here you run the google maps functions }
See ya
Solved, the google map type a error, make sure you get object var map = document.getElementById('map-canvas') returning properly using alert(map). Check the div container id name same as specified in getElementByid.
I have also stuck with the same type a error, fixed it by checking getElementByid('map-canvas'). Sample code enter link description here
I have fixed it removing my "style" property from the "div" tag an declaring it correctly, in a css file
My response is bit old but for those who still come here for reference, I have a similar solution. I put map initialization code as specified here https://developers.google.com/maps/documentation/javascript/adding-a-google-map
inside jQuery document ready function. Below is the code that worked in my case:
$(document).ready(function () {
var uluru = {lat: -25.344, lng: 131.036};
var map = new google.maps.Map( document.getElementById('embedmap'), {zoom: 14, center: uluru} );
var marker = new google.maps.Marker({position: uluru, map: map});
});
Google Maps just made the API exactly like the real thing. So now I want the map to display the hybrid map by default, I looked all over Google's Documentation, but I can't seem to find a way to do this.
Thanks in advance!
Did you try the constructor?
map = new GMap2(document.getElementById("map_canvas"), { mapTypes:[G_HYBRID_MAP] });
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
you can also pass the map-type with
map.setCenter(point, zoom, G_HYBRID_MAP);
For the V3 API you can set the default map type in the map options:
map.setOptions({
mapTypeId: google.maps.MapTypeId.HYBRID
});
To make hybrid the default map, try this:
map = new GMap2(document.getElementById("map_canvas"));
map.setUIToDefault();
map.setMapType(G_HYBRID_MAP);
Here's the documentation.
map.maptype = GoogleMap.MAP_TYPE_HYBRID
mMap.maptype = GoogleMap.MAP_TYPE_HYBRID