Loading Google Map

Question

Loading Google Map

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I want to link to a website that I'm developing a Shops API.

I'm using the following Google API - link

If I copy the whole code into an HTML, it works fine, if I put it inside my site, the map does not load and shows no error.

<style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 80%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 80%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPFf086alCsl076VnHe4ap3nEgCx4hZvU"></script><script>//Inthefollowingexample,markersappearwhentheuserclicksonthemap.//Eachmarkerislabeledwithasinglealphabeticalcharacter.varlabels='ABCDEFGHIJKLMNOPQRSTUVWXYZ';varlabelIndex=0;functioninitialize(){varbangalore={lat:12.97,lng:77.59};varmap=newgoogle.maps.Map(document.getElementById('map'),{zoom:12,center:bangalore});//ThiseventlistenercallsaddMarker()whenthemapisclicked.google.maps.event.addListener(map,'click',function(event){addMarker(event.latLng,map);});//Addamarkeratthecenterofthemap.addMarker(bangalore,map);}//Addsamarkertothemap.functionaddMarker(location,map){//Addthemarkerattheclickedlocation,andaddthenext-availablelabel//fromthearrayofalphabeticalcharacters.varmarker=newgoogle.maps.Marker({position:location,label:labels[labelIndex++%labels.length],map:map});}google.maps.event.addDomListener(window,'load',initialize);</script>

ThenIputthediv

I'mtryingtorunwithin link

api google-maps

asked by anonymous 12.06.2018 / 21:44

2 answers

How to move a logo inside the div Angular CLI - ng serve can not read property 'config' of null

score 0 · Answer 1

It seems obvious, but it does so ... Within <head> of your HTML, put this:

<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script><script>//Inthefollowingexample,markersappearwhentheuserclicksonthemap.//Eachmarkerislabeledwithasinglealphabeticalcharacter.varlabels='ABCDEFGHIJKLMNOPQRSTUVWXYZ';varlabelIndex=0;functioninitialize(){varbangalore={lat:12.97,lng:77.59};varmap=newgoogle.maps.Map(document.getElementById('map'),{zoom:12,center:bangalore});//ThiseventlistenercallsaddMarker()whenthemapisclicked.google.maps.event.addListener(map,'click',function(event){addMarker(event.latLng,map);});//Addamarkeratthecenterofthemap.addMarker(bangalore,map);}//Addsamarkertothemap.functionaddMarker(location,map){//Addthemarkerattheclickedlocation,andaddthenext-availablelabel//fromthearrayofalphabeticalcharacters.varmarker=newgoogle.maps.Marker({position:location,label:labels[labelIndex++%labels.length],map:map});}google.maps.event.addDomListener(window,'load',initialize);</script>

Withinthe<body>whereyouwantthemaptobevisible,youputthis:

<divid="map"></div>

There is no dependency on the Maps API relative to another library (eg JQUERY) so if you put <head> and <body> right it will work ...

score 0 · Answer 2

14.06.2018 / 16:53