I'm using this super basic code to add a google maps to my site:
var map;
function initMaps(latIn, longIn, htmltext) {
var LatLng = new google.maps.LatLng(latIn, longIn);
var Options = {
zoom: 13,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mapStatic"), Options);
marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
map.enableDragging();
}
google.maps.event.addDomListener(window, "load", initMaps);
The map is displaying fine, but for some reason I can't drag it around, is it possible that some other piece of javascript is doing this?
I look around, but didn't find anything that could cause a problem.
Related
I am trying to mark some spots on a google map. I am using google maps places javascript api.
function initialize() {
var mapProp = {
center: new google.maps.LatLng(userlatitude, userlongitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map = new google.maps.Map(document.getElementById("midsection"), mapProp);
var mapPosition = new google.maps.LatLng(-20.997110, 123.375544);
markers.push(new google.maps.Marker({
position: {
lat: -20.014006,
lng: 123.421746
},
map: map,
title: 'Mow my lawn',
animation: google.maps.Animation.DROP
}));
(if the Long/Lat are invalid, its because I randomly changed it for the purpose of this post)
I can see the marker drop down and bounce once. But then it disappears. I have tried setting the Zindex, changing the display and position type of the div canvas. But nothing I do seems to make the marker stay.
The problem ended up being hidden in my CSS.
it was just a Canvas: display:none call
I want to tag (or mark) a building (or object) on Google street view in my web pages, and i find a solution that works on Android APP (JavaScript/WebView) in the article" I want to add popover/overlay/hotspot on the streetview of google map in android." But the solution is not for web pages.
Is any solution available for web pages?
Thank you all in advance!
Use google.maps.Marker class
function initialize() {
var hongkongolympic = new google.maps.LatLng(22.320701, 114.160688);
var mapOptions = {
center: hongkongolympic,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: hongkongolympic,
map: map,
title: "Hello World!"
});
var panoramaOptions = {
position: hongkongolympic,
pov: {
heading: 150,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
var marker2 = new google.maps.Marker({
position: hongkongolympic,
map: panorama
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I'm following google map api and add the following code but not showing the marker
function initialize() {
var myLatlng = new google.maps.LatLng(27.7000, 85.3333);
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(27.7000, 85.3333),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
You're creating your map after adding the marker to it, so it is null at that point
var map = new google.maps.Map(map_canvas, map_options);
marker.setMap(map);
you might have some javascript errors so look at the console log
I know the maps are loading, but for whatever reason I can't see them.
JS
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
MarkUp
<div id="map-canvas">
</div>
I know this must be simple and I'm a little confused why I can't work it out, but here is the link: http://stage.sexdiaries.co.uk/map
You need to give the map a size:
<div id="map-canvas" style="height:500px;width:600px;"></div>
My Google Map only shows up fine the first time. Clicking the line a second time or more, the map does not re-draw properly and so is unusable.
I am using the following code:
var myLatlng = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'we are right here ...'
});
var myLatlng2 = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
google.maps.event.trigger(map, 'resize');
With google.maps.event.trigger(map, 'resize') at the end being my attempt to get the map to behave correctly.
You can see the effect at http://test2omniforce.co.uk/node/8 and clicking on the map image.
It doesn't look like a width and height are set on your div with id 'map_canvas' in map.php. I wonder if this is causing the map to not render correctly?
Maybe try adding some dimensions and see if that works.
Good luck!