Google maps

tutorial: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

by Julien Roche

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<body>
  <div role="document" class="height-100">
     <div id="wrap">
         <div ng-view class="height-100"><!-- no angular here, so it should not work -->
            <div id="map-canvas"></div>
         </div>
     </div>
  </div>
</body>

CSS

* {
  box-sizing: border-box;
}

html, body {
	background: #fff;
	box-sizing: border-box;
	color: rgba(0,0,0,.87);
  font-family: ArialRounded,Arial;
  font-size: 13px;
	height: 100%;
	min-height: 100%;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

body {
	background: 0 0;
  color: #333;
  font-family: ArialRounded,Arial;
	font-size: 14px;
	line-height: 1.42857143;
	margin: 0!important;
	min-width: 280px;
	overflow: inherit;
	padding: 0;
	padding-top: 99px!important;
}

.height-100 {
    height: 100%;
}

#wrap {
	background: #fff;
	min-height: 100%;
    padding-bottom: 110px;
	position: relative;
    z-index: 9;
}

[ng-view] {
  /*only to illustrate the purpose*/
  border: 1px solid black;
}

#map-canvas {
    height: auto;
    width: auto;
    background-color: #CCC;
}

JavaScript

function initialize() {

    var myLatLng = new google.maps.LatLng(45.4375, 12.3358),
        myOptions = {
            zoom: 5,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        marker = new google.maps.Marker({
            position: myLatLng,
            map: map
        });

    marker.setMap(map);
    moveMarker(map, marker);

}

function moveMarker(map, marker) {

    //delayed so you can see it move
    setTimeout(function () {

        marker.setPosition(new google.maps.LatLng(45.4375, 12.3358));
        map.panTo(new google.maps.LatLng(45.4375, 12.3358));

    }, 1500);

};

initialize();