When I visit http://maps.google.com on my iOS device, the current location is shown as in the image below.
I'm creating my own Map using the Google Maps API v3. How can I create this function?
I've tried their sample using geolocation in the web browser but it just displays an text box on my location. I would like it to be similar to the image above, where is it shown using the blue markers and a circle showing the accuracy. Is this default behavior if Google Maps API v3 or should I design it myself using an icon, marker and circle?
You can set the marker image by setting the icon property of the MarkerOptions object passed into the Marker constructor to show a custom image.
http://code.google.com/intl/da/apis/maps/documentation/javascript/reference.html#MarkerOptions
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.8848, 14.7730),
map: map,
title: 'My workplace',
clickable: false,
icon: 'http://google-maps-icons.googlecode.com/files/factory.png'
});
Here is a site with some more information about using Google Maps API V3 http://www.svennerberg.com/tag/google-maps-api-3/
Related
I was looking at http://here.com/ and noticed that their controls navigation panel has a zoombar.
I was wondering if this is a map setting or is it something that needs to be custom built.
Posting it here due to lack of a better suited forum.
A zoombar can be added to a map using the HERE Maps API for JavaScript as shown:
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 10,
components: [
new nokia.maps.map.component.ZoomBar()
]
});
The zoombar looks like this:
The zoom control on here.com looks like this:
It is a custom map control and would need to be created with your own code using the UI library of your choice and creating a new class extending MapComponent.
An outline sketch of how to go about this can be found in the question here
I am developing a custom imagemap type map without geo referencing i.e. latlng of my map do not relate to acutal latlng of that place. Now i have also created custom streetview panoramas of certain buildings and places in that map.
The issue is am not able to integrate those custom streetview panoramas with my custom imagemap.
Following is the link to see whats going on:
http://cdi.astateweb.org/virtual_tour/
First Approach:
There are two markers on the map right now. When you click on them a small infobubble pops up. Now when you click on the virtual tour link a dialog comes up. I want to load the custom streetview panorama in that dialog. I tried several things but to no avail. I am trying to reuse the same dialog for both markers. I tried initializing the panorama in jquery ui dialog open function. It worked for the first one but when you close the dialog and open it again it fails with some cbk error from google apis.
SECOND APPROACH:
I tried to use the default streetview pegman such that when the pegman is dropped on a certain building or place which has a panorama the streetview comes up just like in normal google maps. This didn't work either.
Can somebody point me to the right direction. Any help will be highly appreciated.
Thanks
Ok, try like this:
Change at line 41
from
'Virtual Tour'
to
'Virtual Tour'
Change at line 96
$("#dialog").dialog({
autoOpen: false,
width: 650,
open: function() {
console.log($("#" + virtualTour.currentPano));
$("#" + virtualTour.currentPano).appendTo("#dialog").css("display", "block");
},
close: function() {
$("#" + virtualTour.currentPano).appendTo("body").css("display", "none");
}
});
And the below code to add into "createMarker" function.
//After this line.
virtualTour.hotspotArray.push(marker);
//Add this code.
setTimeout(function(){
document.getElementById(pano).style.display = "none";
}, 100);
I am attempting to create our college campus map for our mobile website that will be launching shortly.
I have followed google's map api v3 example for creating a simple image overlay (found here: http://code.google.com/apis/maps/documentation/javascript/examples/overlay-simple.html) which I have successfully created.
However, my question is and what I am struggling greatly with is, how to place markers that show on top of this image overlay?
I understand how to make a marker on google maps, and attempted to implement it with the simple code of:
var myLatLng = new google.maps.LatLng(xx.xxxxx,-xx.xxxxx);
var marker = new google.maps.Marker({
position: myLatLng,
map:map,
title:"testing"
});
however placing that in the initialize section, causes the marker to fall under my custom image overlay... I read that I need to place it in one of the map panes that is greater then the 3rd pane, but this is where I would need some help, where to place this and how?
Markers always render in the overlayImage pane, so rather than trying to move the marker, move the overlay you added so that it appears in a lower pane (beneath the markers).
Replace:
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
with:
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
That is, replace overlayImage with overlayLayer. The Maps API V3 Reference tells me is the pane that contains ground overlays, polygons and polylines (all of which appear below markers).
In google maps api v3, I think you can no longer get all the markers on the map object. I need to hide the very last marker from the DirectionsService result. I used to be able to do this in v2:
_gdir.getMarker(_gdir.getNumRoutes()).hide();
I have routes that start and end in the same place, and I need to hide the very last marker so that it does not overlay my original origin maker.
thanks.
If you can settle with hiding all of them then the DirectionsRendererOptions has an option to suppress markers.
https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions
You hide/remove a marker using the setMap() method with null as the argument:
marker.setMap(null);
Check google docs Remove Marker. Note that the above method does not delete the marker. It simply hide/removes the marker from the map. If you want to show it again just use:
marker.setMap(map);
i built a custom map using google api v3, and I allow my users to use the streetview feature, but i would be able to close it and go back to the regular map by clicking a button (not he X within th emap but my own button)...what's the command to do that? i cant find it in the docs
Try putting this under the pageLoad()
$("#streetview_click").appendTo("#map_canvas");
// google streetmap [top bar (north) ]
$("#streetview_click").click(function(){
var panorama = map.getStreetView();
if(panorama){panorama.setVisible(false);}
});
for more information about streetview script functions check this topic on Google groups:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/d87b18de3a096b8d/b56a04a0440f5016?lnk=gst&q=streetview+close+button#b56a04a0440f5016