All geek questions in one place

Google Maps API - add a marker at javascript

I have a database with addresses, and I want to add markers to Google maps.

It only shows the default marker, it seems that geocoder.geocode () does nothing. For example, I'm trying to add a marker in New York City, without success.

<script> var geocoder; var map; var address = "new york city"; geocoder = new google.maps.Geocoder(); function initMap() { var uluru = { lat: -25.363, lng: 131.044 }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); codeAddress(address); } function codeAddress(address) { geocoder.geocode({ 'address': address }, function (results, status) { if (status == 'OK') { var marker = new google.maps.Marker({ position: address, map: map }); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap" async defer></script>
+5
source share
2 answers

The reason why you are not getting the expected result is because in the above example there is a wrong placement of the code. You are trying to get a new instance of the Google Maps API Geocoder before Google Maps is fully loaded. Therefore, the Google Maps API Geocoder will not work because of this Uncaught ReferenceError: google is not defined . You should get a new instance of the geocoding of the Google Maps API in the initMap () function.

You can check the Maps JavaScript Geocoding API to find out more.

You can also check out Best Practices for Geocoding Addresses .

Also note that you should not specify your API_KEY when posting questions related to Google Maps APi.

Here is the whole code:

 <!DOCTYPE html> <html> <head> <title>Geocoding service</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <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> </head> <body> <div id="map"></div> <script> var geocoder; var map; var address = "new york city"; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: -34.397, lng: 150.644} }); geocoder = new google.maps.Geocoder(); codeAddress(geocoder, map); } function codeAddress(geocoder, map) { geocoder.geocode({'address': address}, function(results, status) { if (status === 'OK') { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html>

Live demo here .

Hope this helps!

+4
source

There were a few errors in your code. Usually it should look normal:

 var geocoder; var map; var address = "new york city"; function initMap() { geocoder = new google.maps.Geocoder(); var uluru = { lat: -25.363, lng: 131.044 }; map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); codeAddress(address); } function codeAddress(address) { geocoder.geocode({ 'address': address }, function (results, status) { console.log(results); var latLng = {lat: results[0].geometry.location.lat (), lng: results[0].geometry.location.lng ()}; console.log (latLng); if (status == 'OK') { var marker = new google.maps.Marker({ position: latLng, map: map }); console.log (map); } else { alert('Geocode was not successful for the following reason: ' + status); } }); }

This is a list of your errors:

  • You must initialize your geocode when the google maps api is fully loaded. This means that you must put this line of code: geocoder = new google.maps.Geocoder(); in initMap () .
  • When you initialize the map, you need to access the global variable. In your code, you create a new variable in your function. But you need to go through the global variable map.
  • When you want to get the position of the result of the geocoder, you should go through this line of code: results[0].geometry.location.lat () .

You can refer to the documentation .

Tell me if you have any questions.

+1
source

Source: https://habr.com/ru/post/1272800/

More articles:


All Articles