I am using following code to get the location of user in phonegap (it works fine)
function getLocation() {
var win = function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var myOptions = {
center: myLatlng,
zoom: 7,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map_element = document.getElementById("displayMap");
var map = new google.maps.Map(map_element, myOptions);
};
var fail = function(e) {
alert('Error: ' + e);
};
var watchID = navigator.geolocation.getCurrentPosition(win, fail);
}
This is working fine by centering the user's current location on the map. But I would like to show an indicator (a red dot) on the user's location. But I can see that google API provide only 3 options center, zoom and mapTypeId.
Are there any available options that can be used to highlight the position or is there a workaround?
EDIT
Was able to find that google maps API has a marker ho highlight any position. That looks helpful, but that shows a default red balloon, can that be modified by a custom image?
You can use the newly released GeolocationMarker which is part of the Google Maps API Utility Library.
It will add a marker and accuracy circle at the user's current location. It also allows a developer to customize the marker using the setMarkerOptions method and specifying an icon property.
Use icon inside marker like
var Marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: "",
icon: /bluedot.png
});
you can use this google map location indication circular blue dot icon similar to the google map
You can use MarkerOptions to set a custom image. Check the Google Maps Javascript API V3 Reference to more details about Google Maps.
Related
I've been searching for a map API that allows me to see in a 45 degree angle, such as Google Earth does.
So far I haven't found any, and I know that Google Maps and Bing Maps do not have this function. And any others found do not include the country required: Portugal.
I'm searching for, preferably, a map that is not installed by a plugin, but in last case, I will work with that.
With google maps this is possible. You must use the tilt property in mapOptions
var mapOptions = {
center: new google.maps.LatLng(36.964645, -122.01523),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE,
tilt: 45
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
Look at this sample from google dev
I have a app that users have to login to via facebook and it then places them on a google_map
I want to connect the geolocated marker with the logged in user.
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
new google.maps.InfoWindow({
map: map,
position: pos,
new google.maps.InfoWindow({
map: map,
position: pos,
getContent(user.displayName)
};
});
https://github.com/5-minute-catchup/ANEWREPO
Here is a working example. So if the logged in user allows the permission (permission to share their location) then she can see the marker that represents her location. Otherwise, blankspace instead of map, if user denies permission.
I believe the way to do this is with custom markers and creating a function to call the data and put it into the custom markers.
see
JS Maps v3: custom marker with user profile picture
I've implemented the following code for a Google map with a custom SVG marker:
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// create marker
var iconBase = 'http://localhost:8888/theme/wp-content/themes/bananas/images/';
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : iconBase + 'marker.svg'
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
This works great, but I wondered if it's possible to add a PNG fallback for browsers that do not support SVG?
Maybe it's possible to display a div instead of an icon and then control the SVG detection with modernizr.
I realize this is an old question, but for anyone else who's pondering this: Sure you can! Create both svg and png icons in the same folder, and make the file extension into a variable, like so:
var imageType;
Then you can call it like this:
icon: '/your/folder/marker.' + imageType
This allows you to change file extension based on browser, like this:
if (!!navigator.userAgent.match(/Trident/g) === true) { //IE
imageType = 'png';
} else {
imageType = 'svg';
}
And voila! Crisp vector icons for modern retina displays, and reliable raster icons for your grandmother running Windows 7. :-)
I do not think Google Maps API would handle the fallback for you but,
You can handle it yourself using the Modernizr.svg function in the Modernizr plugin to check if the current browser support svg.
I have a sample in jsfiddle. and here is the direct link.
https://css-tricks.com/using-svg/#cp_embed_lCEux
I have a KML export from google maps, and some pointers have images or youtube videos. When i open the kml i see a tag on some pointers with youtube and image links. But when i load them into the Google Maps Api i cant see these urls.
This is what i have:
function initialize() {
var mapOptions = {
center: { lat: 52.448346, lng: 4.602585},
zoom: 12
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var kmlLayer = new google.maps.KmlLayer({
url: 'test_1.kml',
clickable: true,
preserveViewport: true,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
console.debug(event);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Is there something to extract the media from the pointers?
My solution would be to export to a xml or json then build a map from it since ExtendedData of kml is partially supported by design, check out the documentation here
Here a possible duplicate of this question: Accessing ExtendedData information via Google Maps API v3
Having an odd problem printing an API-generated (V3) Google Map from Internet Explorer 7 & 8.
I generate my map with JavaScript similar to the following:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var centroid = new google.maps.LatLng(35.9948166667, -83.9781791667);
var myOptions = {
disableDefaultUI: true,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: centroid
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker0 = new google.maps.Marker({
position: new google.maps.LatLng(36.1102, -83.9208),
map: map
});
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(36.001, -83.8646),
map: map
});
}
</script>
Typically there are about 25-35 markers on any of my maps. These print just great from Safari, Firefox, and Chrome, on both OS X & Windows XP. But, as soon as I try to print from Internet Explorer 7 or 8, the maps go all crazy: they overflow their boundaries that I set in the print CSS and the markers disappear from the map, leaving just a blank spot on the map.
Anyone encountered this/know how to proceed?
TIA.
IIRC, you'll have to use the Google Static Maps API if you want printer friendly maps.
It should be pretty easy to build the Static Maps API URL request string from the LatLng or your markers. One caveat is that the URL is limited to 2048 characters including any character escapes, this will limit how many markers you can have on the map at one time.
[Edit] In the Javascript API, markers have the class 'gmnoprint', which disables them from showing up on the printed rendering. You can iterate through the markers and remove this class, which should allow them to be printed on the page. As far as I know, this will not work for the direction lines.