title: Adding Custom Markers to Custom Styled Google Maps API v3 for Wordpress website
body: <p><strong>Hi Everybody!</strong></p>
  
  <p>I am trying to create a Custom Styled Google map using API v3. The map will eventually go on the following Wordpress page (310px x 537px blank space on right side of page): <a href="http://www.flatschicago.com/edgewater-chicago-apartments/" rel="nofollow">http://www.flatschicago.com/edgewater-chicago-apartments/</a></p>
  
  <p>I have copied the JavaScript/HTML code from the <em>Google Maps Javascript API v3—Simple styled maps</em> page, and have change the color scheme to fit my websites overall theme. I have managed to format the code with the colors that I want, and I have managed to format the size of the map so it fits the space designated on my web page.</p>
  
  <p>Here are the <strong>3</strong> things that I am having issues with:</p>
  
  <ol>
  <li>I want to add 5+ custom plot markers to the map. Where do I add this code?</li>
  <li>I want the street labels to appear on the map. Where do I add this code?</li>
  <li>I tried adding the code in to my Wordpress page, but I did not work. Is there a certain part of the JavaScript/HTML code that I should only be adding?</li>
  </ol>
  
  <p>Here is the code that I have so far.</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Simple styled maps&lt;/title&gt;
      &lt;style&gt;
      html, body, #map-canvas {
          height: 100%;
          margin: 0px;
          padding: 0px
        }
  
      &lt;/style&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
      &lt;script&gt;
      var map;
      var edgewater = new google.maps.LatLng(41.987245, -87.661233);
  
      var MY_MAPTYPE_ID = 'custom_style';
  
      function initialize() {
  
      var featureOpts = [
  
      {
        stylers: [
          { hue: '#3b3d38' },
          { visibility: 'simplified' },
          { gamma: 0.5 },
          { weight: 0.5 }
        ]
      },
      {
      featureType: 'poi.business',
        elementType: 'labels',
        stylers: [
          { visibility: 'off' }
        ]
      },
      {
        featureType: 'water',
        stylers: [
          { color: '#3b3d38' }
        ]
      }
      ];
  
        var mapOptions = {
      zoom: 12,
      center: edgewater,
      mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
      },
      mapTypeId: MY_MAPTYPE_ID
      };
  
      map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  
  
      var styledMapOptions = {
      name: 'Custom Style'
      };
  
      var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
  
      map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
  
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload='intialize()'&gt;
      &lt;div id="map-canvas" style='width:310px; height:537px;'&gt;&lt;/div&gt;
     &lt;/body&gt;
     &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>1) Adding 5+ Custom Plot Markers</strong>
  The code I am referring to is from the following page: <a href="https://developers.google.com/maps/documentation/javascript/markers#complex_icons" rel="nofollow">page link</a>.
  I understand that I need to add a marker image and long/lat for each location, but when I try and copy and paste this code into the code that I already have created, the map doesn't work. Where am I supposed to be copying and pasting this code? Do it go inside the function initialize() code? Or is it its own function? Very confused.</p>
  
  <p><strong>2) Adding Street Labels</strong>
  The code I am referring to is from the <em>Google Maps Javascript API v3—Styled Maps</em> page.
  All I want to do is to be able to see the street labels on the map. The code I am referring to is this. I tried putting this in to my code, but again, it didn't work. Is there a simply label like 'roads,' 'on' that gets these labels to work?</p>
  
  <pre><code>var styleArray = [
  {
  featureType: "all",
  stylers: [
    { saturation: -80 }
  ]
  },{
  featureType: "road.arterial",
  elementType: "geometry",
  stylers: [
    { hue: "#00ffee" },
    { saturation: 50 }
  ]
  },{
  featureType: "poi.business",
  elementType: "labels",
  stylers: [
    { visibility: "off" }
  ]
  }
  ];
  </code></pre>
  
  <p><strong>3) Add code to Wordpress page</strong>
  The map will eventually go on the <em>/edgewater-chicago-apartments/</em> pahe.
  The space that I left for the map is labeled 
      <code>&lt;td class="neighborhood-map" rowspan="5"&gt;&lt;/td&gt;</code> :</p>
  
  <p><strong>If someone could please help me with this, I will be forever grateful. I feel like I am so close, yet these three things are holding me up and it is very frustrating. Anyone?</strong></p>