I have a webmap with GMaps & GEarth integrated, in order for the user to switch between different views.
I load 3 KML files and control their visibility using checkboxes. This example here uses the same function stackOverflowQuestion
When I switch views Map - Satellite - Earth I have my KMLs working on Map & Satellite view, BUT not on Earth View.
function init() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(xx, xx),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
googleEarth = new GoogleEarth(map);
google.maps.event.addListenerOnce(map, 'tilesloaded', addOverlays);
}//end init
[...]
function OnOffKML(i) {
if(currentKmlObjects[i].getMap() === null) {
currentKmlObjects[i].setMap(map);
}
else {
currentKmlObjects[i].setMap(null);
}
}
this function works for Google Maps Api 3, but not for Google Earth plugin...
Does this mean I have to use the fetch{} for it to show on GE? Is there a workaround?
Could I exclude my toggleKML{} for the earth view in any way?
OK,
The problem here is that we cannot code for GM Api 3 and expect to have results for GE Api as well.
Sure the two can be integrated but you have to decide that one of the two will have limited functionality.
Thus I decided to split the application up, work separately and efficiently.
As for GE method for KML usage, I have used the fetch{} function, along with checkbox selection.
That is not strictly true, you would just need to reload your Kml into the earth API.
You could modify your OnOffKML function to act differently depending on the current mode (earth/maps).
The problem you have currently is that you are using Google Maps Api methods, on the Google Earth plugin.
Anyhow, something like the following would work, allowing the method to handle both.
function OnOffKML(i) {
if(googleEarth.getWindow().getVisibility()) {
// code for earth api
} else {
// code for maps api
}
}
Related
I need you help. I use the Plugin WP GPX MAPS together with another google map (integrated in sabai google maps) plugin. unfortunately the map of WP GPX maps is not showing up because of "a javascript error that is telling there are 2 instances of Google Maps API being loaded"
I have already searched for a solution in stackoverflow and found out that I have to add this code line
google.maps.event.trigger(map, "resize");
in my js file wp-gpx-maps.js https://github.com/wp-plugins/wp-gpx-maps/blob/master/WP-GPX-Maps.js
but I do not know if this is right and where in wp-gpx-maps.js I have to include this line.
can you pls. help me and point out in which line I have to put google.maps.event.trigger(map, "resize");
thank you very much!
See Problem here https://www.tourendatenbank.com/touren/gipfel/gangolfsberg
it's only a compatibility problem with your tab plugin.
this is your code:
jQuery(document).ready(function() {
var sabai_wpgpxmaps = function() {
<<wp-gpx-maps code>>
};
if (jQuery("#sabai-inline-content-wpgpxmaps").is(":visible")) {
sabai_wpgpxmaps();
} else {
jQuery("#sabai-inline-content-wpgpxmaps-trigger").on("shown.bs.sabaitab", function(e, data){
sabai_wpgpxmaps();
});
}
});
the function sabai_wpgpxmaps is never been called
I'm using a code similar the one below to display buildings KML Layer. Click event works and i get name and HTML. What i need to do is, I want to change style of the clicked polygon/line. Let say I want to change border width. How can i do that?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
ctaLayer.addListener('click', function(kmlEvent) {
//need to change style of the clicked element here.
});
}
You can't change the styling of a KmlLayer using the API.
Options:
use a FusionTablesLayer (import your KML into a FusionTable, you can dynamically style polylines from a FusionTable).
use a 3rd-party KML parser, like geoxml3 or geoxml-v3 to render the KML as native Google Maps JavaScript API v3 polylines, then modify those. Note that the 3rd-party parsers are subject to the same domain security policy for the KML, so can only access KML from other domains through a proxy.
example using geoxml3 (polylines change to yellow on mouseover)
I was fiddling a bit with Here Maps and with some some of the examples Here Javascript API Explorer and Here Maps on GitHub.
I tried to see if there's already a way to just add a visual bearing attribute in addition to longitude and latitude and have something like a small tip appear to the marker. This feels like something that many would like to have, so just to check I haven't missed anything obvious...
Is there a way to add visual bearing information to markers?
If not, does anyone know if there's an example of using a custom marker to achieve this I just couldn't locate?
There is no bearing/heading control ready available within the API - you will have to create a custom map component of your own. The usual way of doing this would be to inject some HTML as a new DOM element within the map control.
Firstly define your custom HtmlControl as shown:
function extend(B, A) {
function I() {}
I.prototype = A.prototype;
B.prototype = new I();
B.prototype.constructor = B;
}
function HtmlControl (html, id) {
nokia.maps.map.component.Component.call(this);
this.init(html, id);
}
extend(HtmlControl,
nokia.maps.map.component.Component);
HtmlControl.prototype.init = function (html, id) {
that = this;
that.id = id
that.set("node", document.createElement("div"));
that.node.innerHTML = html;
};
HtmlControl.prototype.getId = function() {
return "HtmlControl." + this.id;
};
HtmlControl.prototype.attach = function(map) {
map.getUIContainer().appendChild(this.node);
};
HtmlControl.prototype.detach = function(display) {
map.getUIContainer().removeChild(this.node);
};
Then set up the map and add the custom component as shown:
htmlControl = new HtmlControl(
"<img id='compass' style='left:4em;top:1em;width:100px;height:100px' src='...'/>", "Compass");
map.components.add(htmlControl);
The source file for the <img> element will need to hold the compass image. This is most likely to be an image with due North pointing upwards since the map control is based on the Normalized Mercator projection
Alternatively look at using the Map Image API and investigate the ra parameter to rotate the map.
I am porting app from API v.2 to API v.3
App have function that allows user to draw a polyline. Every time new vertex is inserted path length is updated. How to do it in v.3 as drawing library has events only on "polylinecomplete".
Editing events described here, may be used only on existing polylines. This do not make me happy as I can receive my polyline object only when drawing is done...
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.POLYLINE) {
my_polyline = event.overlay
drawingManager.setMap(null);
}
});
I know this question is quite old. Just in case someone falls into the same problem :
The editing event api is plenty usefull :
google.maps.event.addListener(your_polyline.getPath(), 'insert_at', function(index) {
// Do what you like when you insert a new point on your polyline here.
});
google.maps.event.addListener(your_polyline.getPath(), 'set_at', function(index) {
// Do what you like when you move an existing point on your polyline here.
});
Set Sencha Touch Map Location
Hi All, I am trying to simply set the Sencha Touch 2 map object to a specific zipcode. I an setting the config to to {useCurrentLoction: true} which works fine but after hours of research I can't seem to find a way to tell the map object to reposition to another city, or address or specifically a zipcode somewhere else in the US.
It looks like the Google API has these features but this include:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Doesn't recognize the api calls that Google is using in their docs. Google says to get am API access key but this needs to run from multiple locations so I was hoping to achieve this without needing to get a key.
Has anyone been able to reposition the Sencha Touch 2 map object with the API accessed by the above (maps.google.com/maps/api/js?sensor=true) ?
Thanks!
Just include <script src="http://maps.google.com/maps/api/js?sensor=true"></script> in your HTML file
Then in your view create a xtype map, and then in the listener add an event painted like this:
listeners:
{
painted: function( component, eOpts ) {
console.log("Entered paint");
gotoAddress();
var map = Ext.getCmp('mymap');
map.setMapCenter(addr);
}
}
// Location function add the parameter as desired address to navigate.
// This also includes showing mapper and info window
function gotoAddress() {
var address = "enter the address required";
var map = Ext.getCmp('mymap');
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
addr= results[0].geometry.location;
map.setMapCenter(results[0].geometry.location);
marker.setMap(map.getMap());
marker.setPosition(results[0].geometry.location);
infowindow.setContent(address);
infowindow.open(map.getMap(),marker);
} else {
alert('Sorry Address could not be traced: ' + status);
}
});
}
Note: Paint is the event that gets called every time you navigate to page where you have used the map. Initialize event will be created only once when you create this page.