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.

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

<div id="map-canvas"></div>
<!--Google Maps API-->
<script type="text/javascript" src=";sensor=true"></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,
    title: 'Atlas Körper Zentrum'
google.maps.event.addDomListener(window, 'load', initialize);


Google Maps Javascript API