Posted on

Add Google Maps to your Site

What is it all about?

Adding some location information to a website is great to show the location of your business, where to go to or where you will find something.

Here the basic part to integrate a map on your web site and place a marker at a specific location with an animation.

<style>
#map-canvas {
  width: 100%;
  height: 350px;
  margin-bottom: 15px;
  border: 2px solid #fff;
}
</style>

<div id="map-canvas"></div>
    
<!--Google Maps API-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnycWatbGyK6ldFqErjFtko1yeMclNUOA&amp;sensor=true"></script>

<script>
function initialize() {
var myLatLng = {lat: 47.959283, lng: 14.772461};
            var mapOptions = {
                center: new google.maps.LatLng(47.959283, 14.772461),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false,
                draggable: true,
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true,
                rotateControl: true,
            };
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
animation:google.maps.Animation.DROP,
    title: 'Atlas Körper Zentrum'
  });
        }
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Links

Google Maps Javascript API