!DOCTYPE html> html> html> html> head> src = "https://maps.googleapis.com/maps/api/js" script src = "https://maps.googleapis.com/maps/api/js" /script> /script> /script> var mapOptions = center:new google.maps.LatLng(17.377631, 78.478603), zoom:5 function loadMap() var mapOptions = center:new google.maps.LatLng(17.377631, 78.478603), zoom:5 var map = new google.maps.Map(document.getElementById("sample"),mapOptions); var marker = new google.maps.Marker( position: new google.maps.LatLng(17.377631, 78.478603), map: map, animation:google.maps.Animation.Drop ); /script> /head> div id = "sample" style =
Additionally, an icon object contains an anchor property that we will not use in our example but which is quite significant. The anchor property specifies the location of the icon's hotspot (based on the scaledSize and origin value). The graphic below illustrates what occurs when you experiment with anchor values. The relevant coordinates are shown by the red default Google Maps marker. Anchor (top left image) is set to the default value of the point in the center of the icon's bottom. It is as follows for our 96px 96px icon: new google.maps.Point anchor (48,96)
I'd want to utilize a custom symbol on Google Maps, and have included the icon's url in the code. However, it is not reflected on the map. Could somebody tell me what I'm missing here? Why does the icon not update after adding the icon url "http://google-maps-icons.googlecode.com/files/sailboat-tourism.png"? src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"> /script> /script type="text/javascript"> /script type="text/javascript" = var markers [ 'title': 'This is title', 'latitude': '-37.801578', 'longitude': '145.060508', 'icon': 'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png', 'description': 'Vikash Rathee. This is a trial. Description
a href="http://www.pricingindia.in/pincode.aspx">Pin Code by City/a>' ]; /script> a href="http://www.pricingindia.in/pincode.aspx">Pin Code by City/a> onload = window.onload () var mapOptions = new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 10, flat: true, styles: [ "stylers": [ "hue": "#4bd6bf", "gamma": "1.58" ] ], mapTypeId: google.maps.MapTypeId.ROADMAP ; var infoWindow = new google.maps. (document.getElementById("dvMap"), mapOptions); for I = 0; I markers.length; i++) for I = 0; I markers.length; i++) for I = 0; I markers.length; i++) for I = 0; I markers.length; i++ var data = identifiers I var myLatlng = new google.maps.LatLng(data.lat, data.lng); var marker = new google.maps.Marker( position: myLatlng, map: map, title: data.title); (marker, data) google.maps.event.addListener(marker, "click", function (e) infoWindow.setContent(data.description); infoWindow.open(map, marker); ); )(marker, data); )(marker, data); )(marker, data); )(marker, data); )(marker, data); div id="dvMap" style="width: 100%; height: 100% ">
The map is supplied with the different public locations through an array, and a loop is run during which a marker is produced and posted to the Google Map. I've allocated a unique Image Marker Icon URL to each public space. Finally, a loop is run through the Array elements, and each Marker is uploaded to Google Maps one by one. To display the Custom Image Icon as a Google Maps Marker, you must assign the URL of the Image Icon to the Google Maps Marker object's Icon attribute.
