CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-geocoder
Divya Jose
Divya Jose

Reputation: 389

Google map does not show up using Geocode services

I am trying to use Geocode services but for some reason the map does not show up. When I checked the developer console it does not show any Javascript error.

This is how the google map shows up in chrome.

enter image description here

<!DOCTYPE html>
        <html>
          <head>
            <title>Simple Map</title>
            <meta name="viewport" content="initial-scale=1.0">
            <meta charset="utf-8">
            <style>
              html, body {
                height: 100%;
                margin: 0;
                padding: 0;
              }
            </style>

            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
            <script src="\div.js"></script>
        [![enter image description here][1]][1]
            <script>
            google.maps.visualRefefresh = true;

        var map;
        function initialize() {
            getCoordinates('287 West Center Street Utah', function(coords) {
                var mapOptions = {
                center: new google.maps.LatLng(coords[0],coords[1]),
                zoom: 8
                };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);
            })
        }

        google.maps.event.addDomListener(window,'load',initialize);
            </script>
        </head>
        <body>
            <div id="map" style="height:100%"></div>        
          </body>
        </html>

div.js

    geocoder = new google.maps.Geocoder();
        function getCoordinates(address,callback) {
            var coordinates;
            geocoder.geocode({address : address} , function (results,status){
                coords_obj = results[0].geometry.location;
                coordinates = [coords_obj.nb, coords_obj.ob];
                callback(coordinates);
            })
        }

Upvotes: 0

Views: 541

Answers (2)

Emir Marques
Emir Marques

Reputation: 2687

EDIT 1

Change this:

function getCoordinates(address,callback) {
    var coordinates;
    geocoder.geocode({address : address} , function (results,status){
        coords_obj = results[0].geometry.location;
        coordinates = [coords_obj.nb, coords_obj.ob];
        callback(coordinates);
    })
}

For this:

function getCoordinates(address,callback) {
    var coordinates;
    geocoder.geocode({address : address} , function (results,status){
        coords_obj = results[0].geometry.location;
        coordinates = [coords_obj.H, coords_obj.L];
        callback(coordinates);
    })
}

Your error: coordinates = [coords_obj.nb, coords_obj.ob];

EDIT 2

geocoder = new google.maps.Geocoder();

function getCoordinates(address, callback) {
  var coordinates;
  geocoder.geocode({
    address: address
  }, function(results, status) {
    coords_obj = results[0].geometry.location;
    console.log(coords_obj)
    coordinates = [coords_obj.H, coords_obj.L];
    callback(coordinates);
  })
}

google.maps.visualRefefresh = true;

var map;

function initialize() {
  getCoordinates('287 West Center Street Utah', function(coords) {
    var mapOptions = {
      center: new google.maps.LatLng(coords[0], coords[1]),
      zoom: 8
    };

    console.log(mapOptions)
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  })
}

google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<div id="map" style="height:900px;width:1000px;"></div>

Upvotes: 1

geocodezip
geocodezip

Reputation: 161384

Do not use undocumented properties of the Google Maps Javascript API v3. They can and do change with every release. Always use the documented methods (.lat(), .lng()).

working fiddle

code snippet::

google.maps.visualRefefresh = true;

var map;

function initialize() {
  getCoordinates('287 West Center Street Utah', function(coords) {
    var mapOptions = {
      center: new google.maps.LatLng(coords[0], coords[1]),
      zoom: 8
    };
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  })

}

google.maps.event.addDomListener(window, 'load', initialize);
var geocoder = new google.maps.Geocoder();

function getCoordinates(address, callback) {
  var coordinates;
  geocoder.geocode({
    address: address
  }, function(results, status) {
    coords_obj = results[0].geometry.location;
    coordinates = [coords_obj.lat(), coords_obj.lng()];
    callback(coordinates);
  })
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="height:100%"></div>

Upvotes: 1

Related Questions