html 谷歌地图 - Carica la mappa tramite le API di google maps

Posted 2021-05-11

<style>
.map-container { 
	border: 1px solid #4A2D2C; 
	padding: 0px 1px 0px 0px;
	background: white; }
</style>
<div class="map-container"><div id="map_canvas" style="width:100%; height:350px;" ></div></div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var map;

    var spot = new google.maps.LatLng(40.706793,-74.012592);
    var mapCenter = new google.maps.LatLng(40.712583,-74.00933592);
    
    var mapOptions = { center: mapCenter, zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP };

    function initialize() {
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      var iconShadow = new google.maps.MarkerImage(
        "http://www.google.com/mapfiles/ms/micons/msmarker.shadow.png", 
        new google.maps.Size(59,32),
        new google.maps.Point(0,0),
        new google.maps.Point(15,32));

      var marker = new google.maps.Marker({
        map: map,
        position: spot,
        icon: "http://www.google.com/mapfiles/markerA.png",
        shadow: iconShadow
      });

      var infowindow = new google.maps.InfoWindow({
        content: '<div id="infoContents"><b style="font-size: 16px">I am so Smart</b><br><br>1 Exchange Plaza<br>New York, NY 10006</div>'
      });

      infowindow.open(map, marker);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>