Complex Marker Icons

Google Maps Jquery with custom marker icons

by Suryar Praveen

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 0.3158, lng: 32.5907}
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var stores = [
['1ST STREET INDUSTRIAL AREA', 0.3203, 32.5998, 357],
['ABAYITA ABABIRI', 0.0935, 32.5009, 356],
['ACHOLI INN', 2.7831, 32.2914, 355],
['ADUKU', 1.9939, 32.7140, 354],
['AIRPORT', 0.0451, 32.4428, 353],
['AKALU', 2.1284, 32.8495, 352],
['APAC', 1.9865, 32.5324, 351],
['ARUA EDIOFE ', 3.0111, 30.8962, 350],
['ARUA HILL', 3.0110, 30.9168, 349],
['ARUA TOWN', 3.0272, 30.9080, 348],
['ATC_ISHAKA TOWN', -0.5426, 30.1368, 347],
['ATC_KAWUKU', 0.2639, 32.6300, 346],
['ATC_MARTIN ROAD', 0.3162, 32.5693, 345],
['ATL_KAKOBA', -0.6022, 30.6636, 344],
['ATL_MBALWA', 0.3793, 32.6621, 343],
['ATL_NAMUGONGO', 0.3659, 32.6547, 342],
['ATL_NDEJJE', 0.2412, 32.5773, 341],
['ATL_WAINA', 0.5559, 33.4073, 340],
['BAKULI', 0.3143, 32.5637, 339],
['BANDA', 0.3517, 32.6439, 338],
['BARAGOLE LIRA', 2.2509, 32.8902, 337],
['BIRERE', -0.6762, 30.6730, 336],
['BOMBO', 0.5767, 32.5471, 335],
['BUBARE', -0.5866, 30.5830, 334],
['BUGEMA UNIVERSITY', 0.5686, 32.6528, 333],
['BUGEMBE HILL', 0.4680, 33.2390, 332],
['BUGIRI_B', 0.5506, 33.7527, 331],
['BUGOLOBI', 0.3144, 32.6310, 330],
['BUKASA ROAD', 0.3006, 32.6176, 329],
['BUKEDEA', 1.3488, 34.0449, 328],
['BUKOMANSIMBI', -0.1701, 31.6240, 327],
['BUKONA KIZIBA', -0.4419, 31.6715, 326],
['BUKOTO', 0.3534, 32.5975, 325],
['BULAGA', 0.3362, 32.4976, 324],
['BULOBA', 0.3227, 32.4424, 323],
['BUNAMWAYA', 0.2670, 32.5164, 322],
['BUNGA', 0.2730, 32.6213, 321],
['BUSEMBATYA', 0.7708, 33.6231, 320],
['BUSESA', 0.6245, 33.6089, 319],
['BUSHENYI',...