var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(53.385846,-1.471385),
map: map,
icon: { url:'images/markers.png', size:{height:37,width:32},origin:{x:32,y:0},anchor:{x:15,y:35}
},
draggable:true
});
I use this code to add marker to a Google map, but it doesn't work.
When I change the draggable parameter value from true to false, it works.
Is it a bug in Google Maps?
The definition of an Icon
defines it in terms of google.maps.Point and google.maps.Size objects, not anonymous javascript objects as in the code example. Note the Icon class is a replacement for the newly deprecated MarkerImage class.
anchor Point
origin Point
scaledSize Size
size Size
This might work better (not tested):
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(53.385846,-1.471385),
map: map,
icon: {
url:'images/markers.png',
size: new google.maps.Size(37,32},
origin: new google.maps.Point(32,0),
anchor: new google.maps.Point(15,35)
},
draggable:true
});
working example
code snippet:
var map;
var triangle = null;
var myLatLng = new google.maps.LatLng(53.385846, -1.471385);
function initialize() {
var mapOptions = {
center: myLatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker1 = new google.maps.Marker({
position: myLatLng,
map: map,
icon: {
url: 'http://www.geocodezip.com/mapIcons/marker1.png',
size: new google.maps.Size(20, 34),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(10, 34)
},
draggable: true
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="height: 400px; width:500px;"></div>
Related
I want to use different animated cartoon images (gifs) as markers on Google Maps; can I do this with the API?
Yes you can Live Example):
var position = new google.maps.LatLng(59.219521,15.1419873);
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: position
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
marker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.DROP,
position: position,
icon: "http://heera.it/wp-content/themes/heerait/img/blog/me.png"
});
}
You just need to use icon:icon-url when creating the marker.
Update:
marker = new google.maps.Marker({
map:map,
draggable:false,
optimized:false, // <-- required for animated gif
animation: google.maps.Animation.DROP,
position: position,
icon: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif"
});
Example Here.
I assumed you can do this:
function showMarkerFeature(p) {
var oF = new google.maps.Marker({
map: map,
position: p,
//set the image src path here
icon: "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png"
});
identifyMarker.setVisible(false);
map.setCenter(p);
return oF;
}
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);
This is the code below. I can't figure out how to add a second marker, I've been toying with it for awhile but I'm terrible with javascript and I really can't figure it out!
$(document).ready(function() {
initializeGoogleMap();
});
// Call this function when the page has been loaded
function initializeGoogleMap() {
var myLatlng = new google.maps.LatLng(45.93986,-85.65181);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("google-map-location"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
var myLatlng2 = new google.maps.LatLng(45.9,-85.6);
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map
});
or
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(45.9,-85.6),
map: map
});
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>
I have a map with two markers on it.
The initial view of the map only shows one marker, and I want to provide a link next to the map that will move the map to the 2nd marker when clicked.
Here's a demo of what I want, using v2 of the API: http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (note the links below the map)
Here's what I have so far:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(50.823817, -0.135634);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
} ,
scaleControl: false
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// 1st marker
var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(50.823817, -0.135634), map: map, title: 'my title' });
var infowindow = new google.maps.InfoWindow({ content: 'my window content' });
google.maps.event.addListener(marker1, 'click', function() { infowindow.open(map, marker1); });
// 2nd marker
var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'});
var infowindow2 = new google.maps.InfoWindow({ content: 'content for my 2nd window' });
google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map, marker2); });
}
</script>
So what I'd like to add is a link to marker2, to move the map some 50-odd miles up,
e.g. Second location.
How would I do this?
Use addDomListener to add a click event to the link that will move the map to that marker (you'll also need to add an id to the link tag so you can reference it in code):
Edit: Set the event in a initialization function:
<head>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'});
google.maps.event.addDomListener(document.getElementById("linkID"), "click", function(ev) {
map.setCenter(marker2.getPosition());
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
Second place
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>