I have created a custom Google Maps projection using the Google Maps Javascript API V2. It looks like this, as per the API specification:
function PProjection(levels) {
this.fromLatLngToPixel = function(latlng, zoom) {
...
};
this.fromPixelToLatLng = function(pixel, zoom) {
...
};
this.tileCheckRange = function(tile, zoom, tilesize) {
...
};
this.getWrapWidth = function(zoom) {
...
};
}
Previously, I had my version of the API set to 2.147 and everything worked fine. However, Google recently made the lowest version available 2.193. This new version breaks my projection. Whenever I try to add a marker, I get the following error in Firebug:
d.getNearestImage is not a function
According to this post a new method called
GProjection.getNearestImage(pixel,zoom,centrepixel)
was added in version 2.148, so it kind of makes sense that this problem would occur if I used a version of the API above 2.147. However, there is no note in the reference manual of an official change in the API. I added a dummy method of this name to my projection, but no luck. Any ideas on how to fix my projection or on how to revert to 2.147?
You can request a specific version through this method: http://groups-beta.google.com/group/google-maps-api/web/javascript-maps-api-versioning
Related
So, I set up my firebase to communicate with my web app which uses google maps api and my goal is this: When a user draws a shape on the map(polygon, linestring), I want to send the geoJson value of it to the firebase(currently sending it as a String), and then retrieve it back so it appears on the map for everyone(since it's getting synced from the firebase database). My problem is that when I try to retrieve the geoJson data back and add it on google maps, at the line map.data.addGeoJson(geoJsonString);(geoJsonString = geoJson value that is stored in firebase) I get an error saying:
Uncaught Jb {message: "not a Feature or FeatureCollection", name: "InvalidValueError", stack: "Error↵ at new Jb (https://maps.googleapis.com/m…tatic.com/firebasejs/4.13.0/firebase.js:1:278304)"}
For some reason google maps api doesnt accept the geoJson value even though console.log(geoJsonString); returns a valid geoJson value (checked at http://geojsonlint.com/)
Now the strange part is that if I try to import the same geoJson value manually(storing the geoJson value in a var and then map.data.addGeoJson(geoJsonString);) it works just fine.
This function syncs firebase with the web app
function gotData(data){
paths = data.val();
if(paths == null){
console.log("firebase null");
alert('Database is empty! Try adding some paths.');
}
else{
var keys = Object.keys(paths);
for(var i = 0; i < keys.length; i++){
var k = keys[i];
var geoJsonString = paths[k].geoJsonString;
console.log(geoJsonString);
map.data.addGeoJson(geoJsonString);
}
}
}
This function updates and pushes data in firebase
function updateData(){
data = {
geoJsonString: geoJsonOutput.value
}
ref = database.ref('firebasePaths');
ref.push(data);
}
In this function(which is used to store geoJson values locally in a file), I call updateData function), after a new path is drawn on the map
// Refresh different components from other components.
function refreshGeoJsonFromData() {
map.data.toGeoJson(function(geoJson) {
geoJsonOutput.value = JSON.stringify(geoJson);
updateData();
refreshDownloadLinkFromGeoJson();
});
}
Example of my firebase that contains 2 random geoJson
I can't trace where the problem is. Any ideas?
Update: I managed to fix this issue by parsing the string with JSON.parse("retrieved string from firebase"), saving it to a variable and then adding it to the map with map.data.addgeoJson(parsed variable).
We still have not faced that issue, however, we are aware of it.
Our intended solution is to use GeoFire: An open-source library for the Firebase Realtime Database that adds support for geospatial querying.
You can find the library description in here:
https://firebase.google.com/docs/libraries/
For the Web supported library:
https://github.com/firebase/geofire-js
I am trying to find a specific listing via the google-maps-places API, but I don't get any results. This is strange to me, as there is a Google+ page and also a google-maps entry.
Let's take a look at the links:
Google+:
https://plus.google.com/115673722468988785755/about
Maps:
https://www.google.de/maps/place/AMWAY+Beratung+%26+Vertrieb+Haegebarth/#53.171976,9.465828,17z/data=!3m1!4b1!4m2!3m1!1s0x47b106116fc69d69:0xe17811ab2780c71d
If I use the very same coordinates from the maps entry in my nearby search and use the name from the entry as the keyword (or location for what it's worth) the results is empty.
Places-API (with exact same coordinates):
https://maps.googleapis.com/maps/api/place/nearbysearch/json?sensor=false&radius=2000&name=amway&location=53.171976,9.465828&language=de-DE&key=YOURKEY
I can of course imagine that the db for the Google+ POIs is a different one. But then again I don't see how the maps api does not find what I can find on the maps web app.
Thanks a lot for any help!
Try something like this:
map.places.nearbySearch({
location: latLng,
rankBy: google.maps.places.RankBy.DISTANCE,
types: ['shop'], // optional
name: "AMWAY Beratung & Vertrieb Haegebarth" // optional
},function(results, status){
if (status == google.maps.places.PlacesServiceStatus.OK) {
// The thing you need should be result[0]
// console.log(results[0]);
if (results[0].name == "AMWAY Beratung & Vertrieb Haegebarth") { // optionally check the type
// You have your place :)
}
}
}
What a workaround! Rumours are that the Google Maps JS API v3.20 or later will allow us to trigger click events on POIs, thereby getting Place objects directly.
Google Maps on windows phone
How can I add pushpins and get directions in here.
Do I require to use JavaScript
Note in this method:
function addMarkers () {
for (var i = 0; i < dataResults.features.length; i++) {
var quake = dataResults.features[i];
var coors = quake.geometry.coordinates;
var latLong = new google.maps.LatLng(coors[1], coors[0]);
var marker = new google.maps.Marker({
position: latLong,
map: map
//icon: getCircle(earthquake.properties.mag)
});
}
}
The important part in that is when we create a marker we give it a map object, which was initialized from the div 'mapdisplay' so we initialize that map object here
function initialize() {
map = new google.maps.Map(document.getElementById('mapdisplay'), {
zoom: 3,
...
and in turn it is passed as the 'map' parameter in the call to:
new google.maps.Marker
This is using the returned earthquake data from the USGS and simply creating the new marker.
You can simply use a similar technique to add your own pins (ie markers), and yes - you need JavaScript : )
https://developers.google.com/maps/documentation/javascript/overlays
In order to get directions see "Displaying the DirectionsResult" at https://developers.google.com/maps/documentation/javascript/directions
or an overview at
https://developers.google.com/maps/documentation/directions/
For a working sample (it's not win8 but it shouldn't matter as I'm assuming you are using a Windows 8 HTML/JS application)
Get directions in new window Google maps API v3
Now with that said - you can also use Bing Maps as well and it's quite documented for Windows 8 applications
Bing Maps for Windows Store Apps
Bing Maps SDK for Windows Store apps Samples
I tried a lot to use networklink tag.. to update a content in google maps Api v3.. but google support told me that networkling update is not supported in google maps.. only in earth.
So I found geoXml3 api.. but there isn't documentation ..
recently I found in http://code.google.com/p/geoxml3/source/browse/branches/polys/geoxml3.js
that implements networklink, here a part of geoxml3.js code:
*// Apply the link
if ((networkLink.link.refreshMode === 'onInterval') &&
(networkLink.link.refreshInterval > 0)) {
// Reload at regular intervals
setInterval(parserName + '.parse("' + networkLink.link.href + '")',
1000 * networkLink.link.refreshInterval);
} else if (networkLink.link.refreshMode === 'onChange') {
if (networkLink.link.viewRefreshMode === 'never') {
// Load the link just once
doc.internals.parser.parse(networkLink.link.href, doc.internals.docSet);
} else if (networkLink.link.viewRefreshMode === 'onStop') {
// Reload when the map view changes
}*
Does anyone used or are using that?
Are there some example of networklink using geoxml3 api ?
My test cases for network links:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_local_network_link_test.html
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_local_network_link_test_local.html
The major caveat of using geoxml3 is that without a proxy, everything needs to be on the same domain.
You might investigate geoxml-v3, it is a port to the Google Maps API v3 of the more mature GeoXml (from the Google Maps API v2).
i am trying to build a google earth view showing cities, but i stuck with the kml parser geoxml3. I have a javascript building a google map at first showing the locations i want. this works fine. I call the function from a php script providing it an address and kml file reference from database. The function builds the map, sets a flag 'map_finished' as a control flag when all ran fine and calls the build google earth view function.
// Get maps and earth from google
google.load( 'maps', '2.s', {'other_params': 'sensor=true'} );
google.load( 'earth', '1' );
//Google Earth Initializer
function initObjectEarth() {
// Check if Google Earth plugin is installed
if( gm_loaded ) {
this.ge_plugin_installed = google.earth.isInstalled();
if( this.ge_plugin_installed ) {
google.earth.createInstance( 'inmap', geSuccessCallback, geFailureCallback );
ge_loaded = true;
} else {
alert( 'Your Browser has not yet installed the Google Earth plugin.
We recommend installing it to use all features!' );
return false;
}
}
}
// Success handler
function geSuccessCallback( object ) {
this.ge = object;
this.ge.getWindow().setVisibility( true );
this.kmlParser = new geoXML3.parser();
}
// Error handler
function geFailureCallback( object ) {
alert( 'Error: ' + object );
}
The geoxml parser uses the ProjectedOverlay class. Both libraries are loaded into document head. When the parser is getting instatiated it requests a ProjectedOverlay instance. This class throws a
Error: **google.maps is undefined**
error in firebug for the following statement
ProjectedOverlay.prototype = new google.maps.OverlayView();
In my script file i have declared vars including
var gm //for google map
var ge //for google earth
gm is set in the function that builds the google map.
I wonder how to fix this issue. I tried the getProjection() thing i found in web as well as
ProjectedOverlay.prototype = new google.maps.OverlayView().prototype;
with no success. This topic is absolutely new to me and i cannot figure out how to fix it neither from the documentation of OverlayView nor from google search.
What did i forget or do wrong?
The call to the geoXML3 constructor is wrong, you must pass the google.maps object as a parameter (...hence the "google.maps is undefined" error).
this.kmlParser = new geoXML3.parser({map: gm}); // gm for google map