I'm trying to display a set of parking icons using an overlay on my google maps api, but can't get it to work for some reason.
I've created a js fiddle for my html here. Here is the beginning of it:
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('parkingIcon.png');
};
Any help is appreciated. Thanks.
Ok, try this code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 100%
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoiYR3lgzcF8CxuOwe7SYsJAPjZQXOhQQ&sensor=false"></script>
<script type="text/javascript">
var line;
var map;
var loc;
var locations = [];
var image = new google.maps.MarkerImage('parkingIcon.png');
function initialize() {
var raleigh = new google.maps.LatLng(35.77425, -78.639248);
var mapOptions = {
zoom : 17,
minZoom : 17,
center : raleigh,
mapTypeId : google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var cityPlaza;
/*var RLINELayer = new google.maps.KmlLayer('http://caseymmiller.com/j586/MapsTest/RLINE.kml');
RLINELayer.setMap(map);*/
var plazaCoords = [
new google.maps.LatLng(35.773893, -78.63854),
new google.maps.LatLng(35.772944, -78.638594),
new google.maps.LatLng(35.772962, -78.639345),
new google.maps.LatLng(35.773884, -78.63928)
];
cityPlaza = new google.maps.Polygon({
paths : plazaCoords,
strokeColor : "#33CCFF",
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : "#33CCFF",
fillOpacity : 0.35
});
cityPlaza.setMap(map);
var parking = [
['Salisbury Deck', 35.775007, -78.640804],
['Cabarrus Deck', 35.774589, -78.640793],
['Hannover Deck', 35.774511, -78.640031],
['Convention Center Underground Deck', 35.773292, -78.639355],
['Performing Arts Deck', 35.772666, -78.641576],
['Charter Square Deck', 35.773893, -78.638551],
['Blount Street Deck', 35.776226, -78.637499],
['McDowell Street Surface Parking', 35.775303, -78.641673],
['Salisbury Parking Lot', 35.775442, -78.640814],
['Convention Center Parking Lot', 35.772553, -78.639527],
['Lenoir Street Parking Lot', 35.773231, -78.638207],
['Carrabus street Parking Lot', 35.774032, -78.63824]
];
for (var i = 0; i < parking.length; i++) {
createMarker(parking[i]);
}
var lineCoordinates = [new google.maps.LatLng(35.779742, -78.643389), new google.maps.LatLng(35.77438, -78.643733), new google.maps.LatLng(35.774259, -78.640396), new google.maps.LatLng(35.772953, -78.640482), new google.maps.LatLng(35.772866, -78.638465), new google.maps.LatLng(35.776879, -78.638315), new google.maps.LatLng(35.776766, -78.634989), new google.maps.LatLng(35.778097, -78.634883), new google.maps.LatLng(35.778202, -78.638209), new google.maps.LatLng(35.781178, -78.638059)];
var lineSymbol = {
path : google.maps.SymbolPath.CIRCLE,
scale : 8,
strokeColor : '#000'
};
line = new google.maps.Polyline({
path : lineCoordinates,
strokeColor : '#C82536',
icons : [{
icon : lineSymbol,
offset : '100%'
}],
map : map
});
animateCircle();
}
function animateCircle() {
var count = 0;
var time = offsetId = window.setInterval(function() {
count = (count + 1) % 2400;
var icons = line.get('icons');
icons[0].offset = (count / 24) + '%';
line.set('icons', icons);
}, 20);
}
function createMarker(parking) {
var myLatLng = new google.maps.LatLng(parking[1], parking[2]);
console.log(myLatLng.toUrlValue());
var marker = new google.maps.Marker({
position : myLatLng,
map : map,
//icon : image //<---- Get rid the comment after upload "parkingIcon.png" file.
/*title: parking[0],*/
});
return marker;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>