Put Google Maps Javascript Function Into External File

StackOverflow https://stackoverflow.com/questions/23192659

  •  06-07-2023
  •  | 
  •  

Pregunta

I need to put my google maps javascript into an external javascript file and I am having some issues doing this. The code below is from my working HTML file, I have tried copying the function into an external file including the script src tags and DomListener. The issue I am having is with the DomListener and it not being able to load its parameters properly. I was wondering if you could please assist me with what I need to put in the external file and what I need to call in the HTML file to execute my script?

Thank you very much, Anthony

<!DOCTYPE html>
<html>
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
<meta name="Park Map Brisbane"
    content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
#map-canvas {
    height: 800px;
    width: 800px;
    text-align: center;
    margin-left: 51px;
    margin: 0px;
    padding: 0px
}

.gm-style-iw {
    height: 100% !important;
    overflow: hidden !important;
}
</style>
<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    function initialize() {
        var myLatlng1 = new google.maps.LatLng(-25.363882, 150.044922);
        var myLatlng2 = new google.maps.LatLng(-25.363882, 152.044922);
        var mapOptions = {
            zoom : 6,
            center : myLatlng1
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

        var contentString1 = 'Mott Park'
        var contentString2 = 'Kilpa Park'

        var infowindow = new google.maps.InfoWindow({});

        var marker1 = new google.maps.Marker({
            position : myLatlng1,
            map : map,
            title : 'Park'
        });
        var marker2 = new google.maps.Marker({
            position : myLatlng2,
            map : map,
            title : 'Water'
        });
        google.maps.event.addListener(marker1, 'click', function initialize() {
            infowindow.close();//hide the infowindow
            infowindow.setContent(contentString1);//update the content for this marker
            infowindow.open(map, marker1);

        });
        google.maps.event.addListener(marker2, 'click', function initialize() {
            infowindow.close();//hide the infowindow
            infowindow.setContent(contentString2);//update the content for this marker
            infowindow.open(map, marker2);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>
¿Fue útil?

Solución

Its working fine for me.

Here's my view/HTML file

<html>
<head>
    <link href="mystyle.css"  rel="stylesheet" type="text/css"/>
    <meta name="Park Map Brisbane" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
        <style>
        #map-canvas {
        height: 800px;
        width: 800px;
        text-align: center;
        margin-left: 51px;
        margin: 0px;
        padding: 0px
        }
       .gm-style-iw{
       height: 100% !important;
       overflow: hidden !important;
       </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="/assets/scripts/test.js"></script>    
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
<html>

The script part is put inside an external file called test.js

To access my javascript file I need the filepath '/assets/scripts'. Please enter your filepath where your script is located. For example, it will be just test.js if its in the same folder level.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top