HTML5 geolocation and Google Maps API

stedman/GeoLocateMe

How show my personal markers in a google maps geolocation?

index.php

css

 

 @-moz-keyframes pulsate {
  from {
   -moz-transform: scale(0.25);
   opacity: 1.0;
  }
  95% {
   -moz-transform: scale(1.3);
   opacity: 0;
  }
  to {
   -moz-transform: scale(0.3);
   opacity: 0;
  }
 }
 @-webkit-keyframes pulsate {
  from {
   -webkit-transform: scale(0.25);
   opacity: 1.0;
  }
  95% {
   -webkit-transform: scale(1.3);
   opacity: 0;
  }
  to {
   -webkit-transform: scale(0.3);
   opacity: 0;
  }
 }
 /* get the container that's just outside the marker image, 
  which just happens to have our Marker title in it */
 #map_canvas div.gmnoprint[title="I might be here"] {
  -moz-animation: pulsate 1.5s ease-in-out infinite;
  -webkit-animation: pulsate 1.5s ease-in-out infinite;
  border:1pt solid #fff;
  /* make a circle */
  -moz-border-radius:51px;
  -webkit-border-radius:51px;
  border-radius:51px;
  /* multiply the shadows, inside and outside the circle */
  -moz-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
  -webkit-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
  box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
  /* set the ring's new dimension and re-center it */
  height:51px!important;
  margin:-18px 0 0 -18px;
  width:51px!important;
 }
 /* hide the superfluous marker image since it would expand and shrink with its containing element */
/* #map_canvas div[style*="987654"][title] img {*/
 #map_canvas div.gmnoprint[title="I might be here"] img {
  display:none;
 }
 /* compensate for iPhone and Android devices with high DPI, add iPad media query */
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
  #map_canvas div.gmnoprint[title="I might be here"] {
   margin:-10px 0 0 -10px;
  }
 }

map.js

 
var personmarker = new google.maps.MarkerImage('bluedot.png', 
     null, // size
     null, // origin
     new google.maps.Point(8,8), 
     new google.maps.Size(17,17) );

   // then create the new marker
      myMarker = new google.maps.Marker({
       flat: true,
       icon: personmarker,
       map: map,
       optimized: false, 
       position: myLatLng,
       title: 'I might be here', //對應css
       visible: true
      });
       var pos = new google.maps.LatLng(25.055923, 121.512852); 
        marker.setPosition(pos);
   map.panTo(pos);