I managed set a custom icon for the image marker (url of icon is in code), but I have no idea how to customize its size. I've looked around for help online, but due to my very limited coding knowledge, have not been able to add the code needed to make it work. Can someone send me the complete, finished code with the modification needed to customize width/height for the market icon?
Thank you!
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDL51DzuRotMkfR09g540u2dZHlKPMpR54'></script>
<div style='overflow:hidden;height:450px;width:100%;'>
<div id='gmap_canvas' style='height:450px;width:100%;'></div>
<style>
#gmap_canvas img {
max-width:none!important;
background:none!important
}
</style>
</div>
<script type='text/javascript'>
function init_map(){
var myOptions = {
scrollwheel: false,
draggable: false,
zoom:16,
center:new google.maps.LatLng(25.841211,-80.308539),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(25.841211,-80.308539),
icon: 'http://www.ssglobalsupply.com/images/location-contact.png'
});
infowindow = new google.maps.InfoWindow({
content:'6891 NW 74th St Medley, FL 33166<br>'
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map,marker);
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>
The size arguments are in pixels. So, to double your example's marker size the fifth argument to the MarkerImage constructor would be:
new google.maps.Size(42,68)
Check the link for steampowered's answer to get more details
Here is the JSFIDDLE for your icon marker size 50px x 50px
var image = {
url: 'http://www.ssglobalsupply.com/images/location-contact.png',
// This marker is 50 pixels wide by 50 pixels high.
size: new google.maps.Size(50, 50),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
Related
I'm trying to add a info window to each of my features in a Google Map. In the example from Google (https://developers.google.com/maps/documentation/javascript/infowindows) They add an info window directly to a marker. I don't have a explicit market to add my info window, instead I have a collection of data that I imported from a GeoJson file.
I can add a click listener to each feature, and create a new InfoWindow with the correct description. However, I get an error (b.get is not a function) when opening the InfoWindow.
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(28.7, -15.0),
mapTypeId: 'terrain'
});
map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson');
map.data.setStyle(function (feature) {
var magnitude = feature.getProperty('mag');
return {
icon: getCircle(magnitude)
};
});
map.data.addListener('click', function (event) {
var infowindow = new google.maps.InfoWindow({
content: event.feature.getProperty('place')
});
infowindow.open(map, event.feature);
});
The error I get with the posted code (once I include all the missing pieces) is Uncaught TypeError: b.get is not a function
The second parameter of the InfoWindow.open method is required to be a MVCObject that exposes a LatLng position property, the only one of which in the core API is a google.maps.Marker (not a event.feature)
from the documentation:
open(map?:Map|StreetViewPanorama, anchor?:*) | Return Value: None
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.
The work around is to set the position of the InfoWindow:
map.data.addListener('click', function(event) {
var infowindow = new google.maps.InfoWindow({
content: event.feature.getProperty('place')
});
infowindow.setPosition(event.latLng);
infowindow.open(map);
});
proof of concept fiddle
code snippet:
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(28.7, -15.0),
mapTypeId: 'terrain'
});
map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson');
map.data.setStyle(function(feature) {
var magnitude = feature.getProperty('mag');
return {
icon: getCircle(magnitude)
};
});
map.data.addListener('click', function(event) {
var infowindow = new google.maps.InfoWindow({
content: event.feature.getProperty('place')
});
infowindow.setPosition(event.latLng);
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, "load", initMap);
// from google sample at: https://developers.google.com/maps/documentation/javascript/earthquakes
function getCircle(magnitude) {
return {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: .2,
scale: Math.pow(2, magnitude) / 2,
strokeColor: 'white',
strokeWeight: .5
};
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
I find lots of answers on this question but not one that works when using .gif images and not markers. To use .gif images (and also animated gifs) I use code (which works)
var image = {
url: 'img/RedFlashYacht.gif',
size: new google.maps.Size(75, 75),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32),
scaledSize: new google.maps.Size(50, 50)
};
marker = new google.maps.Marker({
position: pos ,
map: map,
icon: image,
store_id: mkrID,
optimized: false
});
//for anyone who has not used .gif, the line 'optimized: false' is critical
What I want to do now is rotate the gif image (to a specified angle, not a constant rotate [that I can do as animated gif]). Dispite setting the ID for the image with 'store_id: mkrID,' var mkrID being previously created, and I can read it back with code marker.get('store_id') so I know it's been set. I cannot access the image with document.getElementById. nor can I get any of the google maps API rotate eample code to work either. Examples I find seem to be for v2 or relate to google maps own markers, not custom images using a gif.
Has anyone been able to rotate a gif image in a google map?
The "store_id" property of the marker doesn't give you access to the DOM element which contains the image. If you have a unique icon for each marker, you can grab it using its URL with JQuery, then apply a CSS transform to it:
$('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({
'transform': 'rotate(45deg)'
});
Note: this will only work for markers with optimized: false
proof of concept fiddle
proof of concept fiddle rotating a .png image
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.47949, -122.083168),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = {
url: 'http://www.geocodezip.com/mapIcons/boat-10-64.gif',
size: new google.maps.Size(75, 75),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32),
scaledSize: new google.maps.Size(50, 50)
};
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: image,
store_id: "mkrID",
optimized: false
});
var rotationAngle = 10;
google.maps.event.addListenerOnce(map, 'idle', function() {
setInterval(function() {
$('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({
'transform': 'rotate(' + rotationAngle + 'deg)'
});
rotationAngle += 10;
}, 1000);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
Another way to do it is to use Custom Overlay.
.
.
var overlay = new google.maps.OverlayView();
overlay.draw = function() {
this.getPanes().markerLayer.id = 'markerLayer';
}
overlay.setMap(map);
.
.
var deg = 270;
document.querySelector("#markerLayer img").style.transform = 'rotate(' + deg + 'deg)';
.
See this demo pen for more clarity.
I am using google map on my site and here is google map code:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:440px;width:700px;'>
<div id='gmap_canvas' style='height:440px;width:700px;'></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style>
</div>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(51.5073509, -0.12775829999998223),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.5073509, -0.12775829999998223)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>Title</strong><br>London, United Kingdom<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
and getting this map output:
Currently, I have a div which highlight in Red color and marker is displaying beside Red area so I want to move to the left side.
Now I want to move marker on left side and don't want to use center position because I am showing contents on red area on below example:
Any idea how to move the marker on the top left side?
Thanks.
You can easly shift the map assigning a new center .. (the new coord are for sample)
var newCenter = new google.maps.LatLng(50.5073509, 0.1200)
map.setCenter(newCenter);
You can change the the marker by javascript function
function changeMarkerPosition(marker) {
var latlng = new google.maps.LatLng(-24.397, 140.644);
marker.setPosition(latlng);
}
For more information See this link
I'm trying to get Google Maps to keep its center when resizing responsively.
I've managed to get the map to center but can't work out how to add my marker back in to the JS to make it center too. I'm using the code from here for the map centering... Google maps responsive resize
var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(LAT,LNG),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
keyboardShortcuts: false,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
The code I am using to center the map is above. I have the marker code below too, but I'm not sure how to add it to make it keep its center too.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(LAT,LNG),
map: map,
title: 'Title',
animation: google.maps.Animation.DROP,
})
}
Can anybody help with this?
Here is a first step to get what you want to do:
var map; //<-- This is now available to both event listeners and the initialize() function
var mapCenter; // Declare a variable to store the center of the map
var centerMarker; // declare your marker
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(LAT,LNG),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
keyboardShortcuts: false,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Create a new marker and add it to the map
centerMarker = new google.maps.Marker({
position: new google.maps.LatLng(LAT,LNG),
map: map,
title: 'Title',
animation: google.maps.Animation.DROP
});
mapCenter = map.getCenter(); // Assign the center of the loaded map to the valiable
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
// Here you set the center of the map based on your "mapCenter" variable
map.setCenter(mapCenter);
});
Edit: Based on #Chad Killingsworth comment:
You may want to add an 'idle' event handler to the map to set the mapCenter variable. You can achieve this like this:
google.maps.event.addListener(map,'idle',function(event) {
mapCenter = map.getCenter();
});
Description of the 'idle' event from the doc:
This event is fired when the map becomes idle after panning or zooming.
I have the following code, the circle is already moveable, now I want it to be resizeable:
function init() {
var mapCenter = new google.maps.LatLng(0, 0);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 1,
'center': mapCenter,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(55, 0),
draggable: true,
title: 'Drag me!'
});
var circle = new google.maps.Circle({
map: map,
radius: 3000000 // 3000 km
});
circle.bindTo('center', marker, 'position');
}
// Register an event listener to fire when the page finishes loading.
google.maps.event.addDomListener(window, 'load', init);
Now, how can I do the resizer? I already read: http://code.google.com/intl/pt-BR/apis/maps/articles/mvcfun.html
But there isn't another way to do that?
The google.maps.Circle object has method .setEditable(true). The description from the docs says:
If set to true, the user can edit this circle by dragging the control
points shown at the center and around the circumference of the circle.