I am using the simple code to create a map on my site:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
var map;
function initialize() {
var mapOptions = {
zoom: 12,
scrollwheel: false,
center: new google.maps.LatLng(38.80962, -77.13143),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var customMarker = new google.maps.Marker({
position: latlng,
map: map,
shadow: shadow,
title:"Carlos Gallupa HQ",
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Now I am having issue pinpointing my location using a marker. Any idea how I can do it simple and right? Thanks.
It looks as if your marker position is not defined anywhere. Try this:
var customMarker = new google.maps.Marker({
// Here is the change:
position: map.getCenter(),
map: map,
shadow: shadow,
title:"Carlos Gallupa HQ",
icon: image
});
Related
I am making an aspx page to track vehicles. The only thing I am sticking with is that I don't know how to remove tooltip text from google markers.
The data is displaying correctly.
In the image above, (1) is being shown when I am taking my cursor on marker image and (2) is coming when I am clicking on the marker.
I want to hide (1). How to do that?
I am using the following code:
function initMap() {
var image = '../images/FireTruck.png';
var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: image
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.title);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
Don't set the title property of the marker (that is what sets the tooltip).
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title, // <<<<<<<<<<<<<<<<<< REMOVE THIS
icon: image
});
I'm a newbie with jsfiddle and can't seem to get my font awesome marker onto this fiddle. Can someone tell me what the problem is please?
<div id="googleMap" style="width:500px;height:380px;"></div>
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
map: map,
icon: {
path: fontawesome.markers.MAP_MARKER,
scale: 0.5,
strokeWeight: 0.2,
strokeColor: '#9300D6',
strokeOpacity: 1,
fillColor: '#D69112',
fillOpacity: 1
}
});
/*var marker = new google.maps.Marker({
position: myCenter,
});*/
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
https://jsfiddle.net/rv2eyexs/1/
Updated JSFiddle
I think you forgot add the fontawesome-marker package to your fiddle source. I updated the JSFiddle and works fine.
https://rawgit.com/nathan-muir/fontawesome-markers/master/fontawesome-markers.min.js
I have a problem with a site where the map loads fine everywhere but IE11 (Edge and IE10 are both fine). Actually it loads for a second before being replaced with "Sorry, something went wrong" and in the console it says the error is referrerNotAllowedMapError.
The js code for the page is:
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxx"></script>
<script>
function initialize() {
var styles = [
];
var styledMap = new google.maps.StyledMapType(styles,
{name: 'Styled Map'});
var myLatLng = new google.maps.LatLng(lat,long);
var mapOptions = {
zoom: 16,
center: myLatLng,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var image = '/assets/img/marker.png';
var marker = new google.maps.Marker({
position: myLatLng,
title: 'Title',
icon: image
});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Why would the map be fine in other browsers, but not IE11?
Im having some problems with a street view map: http://server.patrikelfstrom.se/johan/fysiosteo/?page_id=118
Sometimes the window gets grey instead of showing the streetview. So my question is; Is there any way to know when the map has finished loading? I guess its treying to render the map before its completly loaded? Thanks
function initialize() {
var myLatlng = new google.maps.LatLng(57.6988062, 11.9683293);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"Fysiosteo"
});
var panoramaOptions = {
position: myLatlng,
addressControl: false,
pov: {
heading: 90,
pitch: 0,
zoom: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
google.maps.event.addListener(panorama, 'idle', function() { console.log('done'); });
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
I tried with this code to print "done" to the console when the map has finished loading, but it didnt work. Am i doing it wrong? :)
The answer to your specific question ("Is there any way to know when the map has finished loading?") is: Yes. When a Map object is finished loading, it will trigger an idle event. Documentation of events that a Map object fires can be found at http://code.google.com/apis/maps/documentation/javascript/reference.html#Map.
If I already displayed a google map marker.
How could I change its icon using Jquery?
Thanks in advance.
Actually Google Maps API has supported method to setImage for marker. I get this code from Google Code PlayGround (http://code.google.com/apis/ajax/playground/#custom_marker_image_v3)
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(mapDiv, {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}