I'm trying to use Google Maps on my site. I use this code
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
So In FF it throws an error c[Db] is not a function
...Db](d);c.e=new Ff;c.Yb=new Mf;c.mapTypes=new Sf;c.features=new Af;var e=c.Zb=new...
How can I debug this error or fix?
}
You've omitted the new-operator when creating the map, it has to be:
var map = new google.maps.Map(document.getElementById(id+'-canvas'), myOptions);
//________^
Related
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?
I have a very simple set up of a google map. I want to interact with the map using a link outside of the map, so I'm using google.maps.event.addDomListener(), but my events are not being detected. Can anyone help? Jsfiddle here: http://jsfiddle.net/kqUwE/4/
function initialize() {
var myLatlng = new google.maps.LatLng(51.507, -0.1275);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addDomListener(document.getElementById("click_me", 'click', function () {
alert(document.getElementById("click_me"));
}));
}
window.onload = function() {
initialize();
};
Solved it:
Misplaced bracket, should be this instead:
google.maps.event.addDomListener(document.getElementById("click_me"), 'click', function () {
alert(document.getElementById("click_me"));
});
Hi,
that's normal code at Google
var map;
function initialize()
{
var latLng = new google.maps.LatLng(41.079120183660486, 28.994637246032653);
var mapOptions = {
center: latLng,
zoom: 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
});
google.maps.event.addListener(map, 'click', function (event) {
//map.setZoom(9);
//map.setCenter(marker.getPosition());
});
}google.maps.event.addDomListener(window, 'load', initialize);
and I want to multiply marker from my DB and I can't do it. I searched in site but always result is gray map.
And my code is:
<script type="text/javascript">
var map;
var latLng;
function initialize() {
var mapOptions = {
//center: latLng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var markers = [];
#foreach (var item in Model)
{
#:markers.push("#item.map")
// item.map content coming like this : 41.079120183660486,28.994637246032653
}
for (var i = 0; i < markers.length; i++) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
});
}
//google.maps.event.addListener(map, 'click', function (event) {
// //map.setZoom(9);
// map.setCenter(marker.getPosition());
// //placeMarker(event.latLng);
//});
}
google.maps.event.addDomListener(window, 'load', initialize);
I can't add markers. I think missing a lot of things? I really need your opinion. Thanks
Based on your code, it looks like you're adding markers to the same lat/lng. The code below adds a few markers in a loop.
<script>
var map;
var center = new google.maps.LatLng(39.715, -84.103);
$(document).ready(initialize);
function initialize() {
// Create map
var mapOptions = {
zoom: 10,
center: center,
panControl: false,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map_canvas')[0], mapOptions);
for (var ii = 0; ii < 5; ii++) {
var lat = center.lat() + (0.1 * ii);
var lng = center.lng() + (0.1 * ii);
var loc = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: loc,
map: map
});
}
}
</script>
I am unable to successfully add a google map to my dojo mobile application.
I have the following element in markup:
<div id="venue" dojotype="dojox.mobile.View" style="height:100%">
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
And this script:
function initializeMap() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var node = dojo.byId("map_canvas");
var map = new google.maps.Map(node, myOptions);
}
Nothing appears when I execute the initializeMap function. I also tried to set the map variable to the node.innerHTML but only a sliver of the map appears on the top of the viewport.
The example in the dojo site only shows the source of the markup and not the script. What am I missing, please?
Here's snippets of HTML/Javascript I was able to get working.
Details
var latlng = new google.maps.LatLng(item.Latitude, item.Longitude);
if (global.map == null) {
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
global.map = new google.maps.Map(dojo.byId('map_canvas'), myOptions);
} else {
global.map.setCenter(latlng);
}
var view = dijit.byId('ObjectsListView');
view.performTransition('ObjectDetailView', 1, 'slide');
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
});
}