I am starting with google maps. just learning. while ago, it was working. now it's not. everything seems to work in UI Controls, Markers/Overlay but the map is blank.
google.load("jquery", "1.3.2");
google.load("maps", "2");
google.setOnLoadCallback(function() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(103.8, 1.37), 13);
map.setUIToDefault();
map.addOverlay(new google.maps.Marker(new google.maps.LatLng(103.8, 1.37)));
});
The point you are trying to centre the map onto isn't a valid Lat/Lon pair: Latitude runs from +/-90 degrees: you're passing in +103.8
seems like you've got your parameters the wrong way around (Lat +1.37, Lon +103.8 puts you in Malaysia)
Related
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);
I am currently working with the Google Maps API to render directions.
From the technical side everything works fine:
var $canvas = $element.querySelector('#map-canvas');
vvar map = new maps.Map($canvas, {
center: new maps.LatLng(52.46004869999999, 13.37898690),
mapTypeId: maps.MapTypeId.ROADMAP,
zoom: 14
});
var route = {
travelMode: google.maps.TravelMode.BICYCLING,
origin: new google.maps.LatLng(52.455833, 13.322948),
destination: new google.maps.LatLng(52.459281, 13.356367),
};
new google.maps.DirectionsService().route(route, function(body) {
var display = new google.maps.DirectionsRenderer();
display.setMap(map);
display.setDirections(body);
});
Unfortunately the suggested route is absolutely crap. Instead of going directly from A to B it even leaves the city...
Why does this work good with maps.google.com but not with the API? What do I have to change so I get a correct result?
Bodo
The origin is placed on a train station, it seems the DirectionsService suggests to put the car on a train, because there is a vehicle Shipping available.
Google-Maps doesn't use the exact origin, it seems that it geocodes the LatLng and takes the result with type "street_address"(it's Berlinickestraße 16A, 12165 Berlin, Deutschland) as origin.
You may do the same(geocode the LatLng's first and use the results with a type of street_address as origin and destination)
I am relatively new to web development. I am trying to extract a physical location from the longitude and latitude using google map (i think google.map would be right for this). I have already written this code in JADE which gives me lat and long. How can i use this value to see the exact physical location. Thanks !
if (navigator.geolocation) {
console.log('Geolocation is supported!');
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
jQuery("#location_latitude").append(startPos.coords.latitude);
jQuery("#location_longitude").append(startPos.coords.longitude);
console.log(startPos.coords.latitude);
console.log(startPos.coords.longitude);
});
}
A am sure you will find solution looking in the source:
http://html5demos.com/geo
You have to create the map and then locate a marker on it.
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!
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.