Google Maps Marker change size
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map_canvas"></div>
CSS
#map_canvas{
width: 450px;
height: 400px;
}
JavaScript
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarker(map);
}
function setMarker(map){
var beachFlagUrl = "https://image.flaticon.com/icons/svg/33/33622.svg";
var beachflagShadowUrl = "https://image.flaticon.com/icons/svg/33/33622.svg";
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage(
beachFlagUrl,
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage(
beachflagShadowUrl,
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.9, 151.2),
map: map,
shadow: shadow,
icon: image,
title: "Test Marker"
});
google.maps.event.addListener(marker, 'mousedown', function() {
var newIcon = new google.maps.MarkerImage(
this.icon.url,
new google.maps.Size(this.icon.size.width * 2,this.icon.size.height * 2 ),
this.icon.origin,
new google.maps.Point(0, 64),
new google.maps.Size(this.icon.size.width * 2,this.icon.size.height * 2 )
);
var newShadow = new google.maps.MarkerImage(
...