Google maps

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

by tadchristiansen

HTML

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

CSS

#map-canvas {
    height: 600px;
    width: 1200px;
    background-color: #CCC;
}

JavaScript

function initialize() {

    var myLatLng = new google.maps.LatLng(-111.83511829657141, 40.423376019462346),
        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(-111.83511829657141, 40.423376019462346));
        map.panTo(new google.maps.LatLng(-111.83511829657141, 40.423376019462346));
        
    map.data.loadGeoJson("https://api.nearmap.com/coverage/v2/aggregate/boundaries.geojson?types=3D&apikey=ZWZjNWM2OWQtNzBmMi00MTEzLWJmNmEtNDI5MWY2MGRmMTFk");

    }, 1500);

};

initialize();