Working with Google maps on Windows store - google-maps

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

Related

how to add markers and center map in signup form django-map-widget

Using django-map-widget to render a map widget in forms. it works fine, but...
I want to trigger the map in two ways (dynamically via javascript):
trigger to re-center map on x,y
trigger to add a marker to map on x,y
I tried so many ways, but i can't solve it.
You can see and play with my form here
Here are one of my attempts:
var locationRio = {lat: -22.915, lng: -43.197};
var marker = new google.maps.Marker({
position: locationRio,
map: $("#location-map-elem").map,
title: 'Hello World!'
});
I am 90% sure my error is this part: $("#location-map-elem").map
Thanks in advance :)
You need to access google map object for this. The accessing map object feature doesn't release yet. So, you need to install django-map-widgets directly from the master branch.
pip install git+git://github.com/erdem/django-map-widgets.git#master
Check this pull-request for more info.
After you installed the latest version, you will able to play with the Google Map JS API.
// re-center your marker
var map = $('your-map-element').data(map);
var bounds = new google.maps.LatLngBounds();
bounds.extend(your_marker.getPosition());
map.fitBounds(bounds);

How populate a Google Maps info window from a Dart app

I'm working on a Dart app that heavily relies on Google Maps. How does/should one populate a Google Maps info window from within a Dart app?
Four approaches come to mind: Dart string interpolation (the string being HTML code), "templating" or web components or Polymer or...
The prototype (snippets below) does nothing more than placing "foo bar" in the info window.
My Marker class
var markerOptions = new JsObject.jsify({...});
_marker = GoogleMapsApi.newMarker(markerOptions);
GoogleMapsApi.getEventContext().callMethod('addListener', [_marker, 'click', (event) {
map.openInfoWindow(_marker, 'foo bar');
}]);
My Map class
openInfoWindow(JsObject marker, String content){
_infoWindow.callMethod('setContent', [content]);
_infoWindow.callMethod('open', [map, marker]);
}
Sidenote: GoogleMapsApi is my own helper class dealing with Google Maps JavaScript interop, I plan to replace it with Dart Google Maps.

mixing google maps api v2 and v3 possible?

One question linked an interesting example of mixing API v2 and v3!. Look at the code:
function initialize() {
if (GBrowserIsCompatible()) {
// Create and Center a Map
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// bind a search control to the map, suppress result list
map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
}
}
GSearch.setOnLoadCallback(initialize);
The map is apparently in v2 but the code new google.maps.LocalSearch() is v3!
How is this possible?
Maybe it's not really API v3. I thought it could be deprecated Local Search API that worked within API v2, but it is not: in this API the object is google.search.localSearch while here it is google.maps.localsearch ... I'm totaly confused.
That example only uses v2, not v3 at all. The v2 API does optionally expose everything under google.maps (for example google.maps.GeoXml) – most people just use the 'G' naming though.
There's also a difference between google.search.LocalSearch (which lets you query Google for local search results) and google.maps.LocalSearch (which is a v2 control). Since both APIs are deprecated, I'd avoid both!

Google Maps Custom Projection

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

overlay geotagged photo in Google Maps?

I want to create a Google map with user uploaded Geotagged photos that show up on my map. I can easily create manipulate my map but I can't seem to find instruction on how to add these geotagged photos.
Here is an example of what I am try to accomplish:
http://maps.google.com/?ie=UTF8&ll=26.892794,-80.055909&spn=0.003875,0.004828&t=h&z=18&lci=lmc:panoramio
I don't have experience working with photos, but I don't think it should be really any different than placing a GMarker on the map at the appropriate coordinates of your photo, and then in the info window of the tag you would output your custom HTML which would include your photo.
Edit: Specific link leading to the GMarker class in the Google Maps API Reference: http://code.google.com/apis/maps/documentation/reference.html#GMarker
You need to create a tile, then create a tile overlay.
var tilelayer = new GTileLayer(myCopyright);
tilelayer.getTileUrl = function() { return "../include/tile_crosshairs.png"; };
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addOverlay(myTileLayer);
The documentation is here, with a great sample map here.
You could use PHP (or another script) to create a KML or GeoRSS file (much like Flickr's KML and GeoRSS feeds) and have the Google Maps API function GGeoXML load the file as an overlay on the map.
See Google's example code here: http://code.google.com/apis/maps/documentation/examples/geoxml-rss.html
That example is actually loading a live GeoRSS feed from Flickr.