Avatar billede LarsLj Novice
15. november 2015 - 10:42 Der er 1 kommentar

Centrering af et kort fra Google Maps

Hej. Jeg har her et kort fra Google Maps på en tilfældig adresse i et tilfældigt industrikvarter.

Ved nogen, hvordan jeg kan få kortet til at centrere, når sidebredden ændrer sig.

På forhånd tak for hjælp, jeg er kørt fast :-)

// Lars

----------------

Den simple kode til Iframen er:

<iframe src="http://mapbuildr.com/frame/wdaj6j" frameborder="0" height="400" width="100%"></iframe>

----------------

Min API kode er:

<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script>

<script>
    google.maps.event.addDomListener(window, 'load', init);
    var map;
    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(56.190636,10.196241),
            zoom: 15,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.DEFAULT,
            },
            disableDoubleClickZoom: true,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            },
            scaleControl: true,
            scrollwheel: true,
            panControl: true,
            streetViewControl: true,
            draggable : true,
            overviewMapControl: true,
            overviewMapControlOptions: {
                opened: false,
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        }
        var mapElement = document.getElementById('GoogleMapsEks');
        var map = new google.maps.Map(mapElement, mapOptions);
        var locations = [
['Ljungqvist', 'Hvor vi bor', 'undefined', 'lars.ljungqvist@mail.dk', 'undefined', 56.1905024, 10.1936967, 'https://mapbuildr.com/assets/img/markers/default.png'],['Tilfældig industrivej', 'undefined', 'undefined', 'undefined', 'undefined', 55.24598289999999, 10.485508500000037, 'https://mapbuildr.com/assets/img/markers/default.png']
        ];
        for (i = 0; i < locations.length; i++) {
            if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
            if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
            if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
          if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
          if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
            marker = new google.maps.Marker({
                icon: markericon,
                position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                map: map,
                title: locations[i][0],
                desc: description,
                tel: telephone,
                email: email,
                web: web
            });
link = '';    }

}
</script>
<style>
    #GoogleMapsEks {
        height:400px;
        width:1000px;
    }
    .gm-style-iw * {
        display: block;
        width: 100%;
    }
    .gm-style-iw h4, .gm-style-iw p {
        margin: 0;
        padding: 0;
    }
    .gm-style-iw a {
        color: #4272db;
    }
</style>

<div id='GoogleMapsEks'></div>
Avatar billede LarsLj Novice
16. november 2015 - 20:48 #1
Når nu ingen svarer, så er det godt, at jeg selv fandt løsningen. Men jeg vil gerne dele den med andre.

1. Løsningen er på https://gist.github.com/toddmotto/5477991

2. Koden bliver:

  <script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script>

        <script>

        google.maps.event.addDomListener(window, 'load', init);
        var map;
        function init() {
            var mapOptions = {
                center: new google.maps.LatLng(56.190636,10.196241),
                zoom: 15,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.DEFAULT,
                },
                disableDoubleClickZoom: true,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                },
                scaleControl: true,
                scrollwheel: true,
                panControl: true,
                streetViewControl: true,
                draggable : true,
                overviewMapControl: true,
                overviewMapControlOptions: {
                    opened: false,
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP,
            }
            var mapElement = document.getElementById('GoogleMapsEks');
            var map = new google.maps.Map(mapElement, mapOptions);
            var locations = [
    ['Ljungqvist', 'Hvor vi bor', 'undefined', 'lars.ljungqvist@mail.dk', 'undefined', 56.1905024, 10.1936967, 'https://mapbuildr.com/assets/img/markers/default.png'],['Tilfældig industrivej', 'undefined', 'undefined', 'undefined', 'undefined', 55.24598289999999, 10.485508500000037, 'https://mapbuildr.com/assets/img/markers/default.png']
            ];
            for (i = 0; i < locations.length; i++) {
                if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
                if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
                if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
              if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
              if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
                marker = new google.maps.Marker({
                    icon: markericon,
                    position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                    map: map,
                    title: locations[i][0],
                    desc: description,
                    tel: telephone,
                    email: email,
                    web: web
                });
    link = '';    }

        google.maps.event.addDomListener(window, 'resize', function() {
            var center = map.getCenter()
            google.maps.event.trigger(map, "resize")
            map.setCenter(center)
        })

    }
        </script>
        <style>
            #GoogleMapsEks {
                height: 800px;
                width: 100%;
            }

            .gm-style-iw * {
                display: block;
                width: 100%;
            }

            .gm-style-iw h4, .gm-style-iw p {
                margin: 0;
                padding: 0;
            }

            .gm-style-iw a {
                color: #4272db;
            }
        </style>

        <div id='GoogleMapsEks'></div>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester