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
Related
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 would like to add geolocation to the mobile version of my
map located at http://alert.fcd.maricopa.gov/alert/Google/v3/mobile.html.
My map loads through this JavaScript file
http://alert.fcd.maricopa.gov/alert/Google/v3/js/mobilemap_v3.js. You
will notice that line 46 of this file is -
map = new google.maps.Map($('#map_canvas')[0],myOptions);
I have tried the Geolocation example at https://developers.google.com/maps/documentation/javascript/examples/map-geolocation and the W3 HTML5 Geolocation method at http://www.w3schools.com/html/html5_geolocation.asp. But my map loads through jquery and doesn’t use
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
like all the examples.
I can get the geolocation to work if I replace the $ in line 46 with
document.getElementById but then none of my sensors/makers will
display.
Does anyone know how I could get the geolocation working with my
markers/data still loading?
Found an answer to this! I used geolocationmarker-compiled.js (at http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/geolocationmarker/src/geolocationmarker-compiled.js?r=379) and then added
var GeoMarker;
GeoMarker = new GeolocationMarker();
GeoMarker.setCircleOptions({
fillColor: '#808080'});
google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
map.setCenter(this.getPosition());
map.fitBounds(this.getBounds());
});
google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
alert('There was an error obtaining your position. Message: ' + e.message);
});
GeoMarker.setMap(map);
and it works great. Mobile map with Geolocation working is located at http://alert.fcd.maricopa.gov/alert/Google/v3/mobile.html and the geolocation code in in the mobilemap_v3.js file if anyone is looking to do the same thing.
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.
I have been searching the web for a while looking for the option to create a marker on Google Maps with a letter (a.k.a. these: https://maps.gstatic.com/mapfiles/markers2/red_markers_A_J2.png). I know Google offers Dynamic Options (https://developers.google.com/chart/image/docs/gallery/dynamic_icons) but that is now deprecated, plus the icons look old school, not like the ones in the link above.
So Google used to offer this option in the API but now looks like it's only available for themselves? Isn't that weird?
It’s not part of their API, but I’m sure they wouldn’t mind if you borrowed their image for your maps. Just upload the PNG to your own server and instantiate your marker like:
var markerImages = {
a: new google.maps.MarkerImage('red_markers_A_J2.png', new google.maps.Size(20,34), new google.maps.Point(0,0)),
b: new google.maps.MarkerImage('red_markers_A_J2.png', new google.maps.Size(20,34), new google.maps.Point(0,34)),
c: …
}
var marker = new google.maps.Marker({
position: myPosition,
map: myMap,
icon: markerImages.a
});
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.