title: Google Map and custom marker for current location
body: <p>I am building an application that will show markers on a Google Map based on where a user is currently located. However I'm finding the Documentation on the Google site rather confusing and I don't really know where best to start with this.</p>
  
  <p>I want to create a custom marker where the user is located in the form of small icon and then show above it a small popup that when hovered will say something like 'you're here'. e.g. <img src="https://i.stack.imgur.com/1V4sj.png" alt="enter image description here"></p>
  
  <p>I have the following code so far to create a google map and get the user location. So how would I say (basing this on Foursquare) show the blue marker:<img src="https://i.stack.imgur.com/orZ4x.png" alt="enter image description here"> where the location is and then position a popup above it with a small avatar inside e.g. <img src="https://i.stack.imgur.com/KOh5X.png" alt="enter image description here"> it becomes like so: <img src="https://i.stack.imgur.com/NaYJI.png" alt="enter image description here"></p>
  
  <p>My Google code so far is:</p>
  
  <p><a href="http://jsfiddle.net/dnzZd/" rel="nofollow noreferrer">http://jsfiddle.net/dnzZd/</a></p>
  
  <p>If anyone can help me get in the right direction I would very much appreciate it thanks. I'm very good at HTML and CSS so would be able to easily create the style and look I want (if GMaps even relies on CSS) it's just a case of getting it on the screen and understanding more of how this works.</p>
  
  <p>Thanks to all who can help.</p>