googlemaps-v3-utility-library
Version:
Google Maps API V3 Utility Library
35 lines (32 loc) • 1.55 kB
HTML
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>StyledMarker Example: Multi-change</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../src/StyledMarker.js"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(37.313477473067, -121.880502070713);
var myOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var styleIcon = new StyledIcon(StyledIconTypes.BUBBLE,{color:"#ff0000",text:"Stop"});
var styleMaker1 = new StyledMarker({styleIcon:styleIcon,position:new google.maps.LatLng(37.383477473067, -121.880502070713),map:map});
var styleMaker2 = new StyledMarker({styleIcon:styleIcon,position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() {
styleIcon.set("color","#00ff00");
styleIcon.set("text","Go");
});
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<input type="button" id="changeButton" value="Change the color" />
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>