Google Map

Markers

by Ryan Morris

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 300px;
    width:100%;
}

JavaScript

var myLatlng = new google.maps.LatLng(33.019722, -96.699167);

var mapOptions = {
    zoom: 15,
    center: myLatlng
}

var map = new google.maps.Map(
    document.getElementById('map-canvas'), 
    mapOptions
);

// add a Marker? Sure...
var marker = new google.maps.Marker({
    position: myLatlng,    
    title: "Hello, Plano!",
    //icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Azure.png',
    //draggable: true,
    // map: map
});
marker.setMap(map);

// How about right where I am?
// Sure, we can do that
/*
if (navigator.geolocation) {
    
   navigator.geolocation.getCurrentPosition(followMe); 
    
}

function followMe(position) {
     var myPosition = {
        lat: position.coords.latitude, 
        lng: position.coords.longitude
    };
    
    var myLocationMarker = new google.maps.Marker({
        position: myPosition
    });
    
    myLocationMarker.setMap(map);
    
    map.setCenter(myPosition);
}
/**/