Responsive Google Map?

后端 未结 13 1632
北荒
北荒 2020-12-07 10:26

How to make a responsive google map from the code

I use in css

13条回答
  •  孤街浪徒
    2020-12-07 10:35

    My solution based on eugenemail response:

    1. HTML - Google Maps API

    Get API Key

    
    

    2. HTML - Canvas

    3. CSS - Map canvas

    #map_canvas {
        height: 400px;
    }
    

    4. JavaScript

    function initialize() {
        var lat = 40.759300;
        var lng = -73.985712;
        var map_center = new google.maps.LatLng(lat, lng);
        var mapOptions = {
            center: map_center,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var mapCanvas = document.getElementById("map_canvas");
        var map = new google.maps.Map(mapCanvas, mapOptions);
        new google.maps.Marker({
            map: map,
            draggable: false,
            position: new google.maps.LatLng(lat, lng)
        });
        google.maps.event.addDomListener(window, 'resize', function() {
            map.setCenter(map_center);
        });
    }
    initialize();
    

提交回复
热议问题