CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
orangestorm87
orangestorm87

Reputation: 23

How to manipulate Google Map after creation?

I should warn you that I am very new to website creation and Javascript. With that out of the way. Because of that I have a google map widget on a website I am creating. It has made the map creation really easy, but if I really need to I guess I could try at coding it myself. That aside, I would like to add buttons on the side of the map that will go to some markers I have created.

I am having difficulties getting the map object to manipulate it after its created. I can't seem to find what the widget calls the map object and so I just can't use the idea of making my map variable a global object.

I am just trying to change the default zoom to start with. Below is what what I am basically trying to do but whenever the code is executed, but my map turns into a gray box on my screen.

<html>  
<head>
<style>
  #map {
    width: 500px;
    height: 400px;
    margin: 0 auto 0 auto;
  }
</style>
</head>  
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<body>
<div id="map"></div>
<script>

  function initMap() {
    var map;
    var myOptions = {
      center: {lat: 40, lng: 50},
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      }
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, myOptions);
    }
    google.maps.event.addDomListener(window, 'load', init_map);
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

<script>
    function newLocation(newLat, newLng) {
    //var mymap = new google.maps.Map(document.getElementById('map'));
    var mymap = document.getElementById('map');
    mymap.setZoom(4);
    }
</script>
<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)">
<body>
</html>

Looking at the google developer tools I get this error "Uncaught TypeError: mymap.setZoom is not a function." I think this means I am getting the map area not the map itself.

Therefore is it possible to grab an instance of the map so I could manipulate it?

Upvotes: 1

Views: 1013

Answers (1)

Bobby W
Bobby W

Reputation: 824

Your not referencing the correct map variable that you create in initMap()

What I would change is make the map variable global, so all of your functions including newLocation() can access this map variable.

Your implementation is using mymap in the newLocation() function, this has access to the div container of the map, not the actual map object itself, which is why you can not change properties such as zoom.

Try structuring it something like so, so you have the correct reference to the map variable.

<html>  
<head>
<style>
  #map {
    width: 500px;
    height: 400px;
    margin: 0 auto 0 auto;
  }
</style>
</head>  
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<body>
<div id="map"></div>
<script>
  var map;

  function initMap() {
    var myOptions = {
      center: {lat: 40, lng: 50},
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, myOptions);
  }

  google.maps.event.addDomListener(window, 'load', init_map);

  function newLocation(newLat, newLng) {
    map.setZoom(4);
  }
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)">
<body>
</html>

Upvotes: 2

Related Questions