Home/ Questions/Q 8712355
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T05:05:37+00:00

I have been getting great help today on Google Map questions and as I

  • 0

I have been getting great help today on Google Map questions and as I work through my code more stuff pop’s up. So here is another question I am hoping to get help with.

There are 2 parts

1) I have tweaked my code to show 2 x Google Maps on the same page. My Google Maps works like this

User Searches for address and the result is

  • The Map Displays a pin of locations
  • Long and lat fields are populated with the coordinates
  • Input field called for Office Name is populated with Search Query.

This all works when I have 1 map. But When i add a map2 to the code below, I am not sure how to write the code to split up the results between map and map2

My Code attempt is as follows (Head)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=true">
    </script>
<script type="text/javascript">

var geocoder;
var map,map2;

function initialize(condition) {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
    var mapOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);  
 }

function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
        document.getElementById("input_15_169").value = marker.getPosition().lat();
        document.getElementById("input_15_167").value = marker.getPosition().lng();
        document.getElementById("input_15_92").value = address;

      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

</script>

and my body looks like this 

<body onload="initialize()" onunload="GUnload()">
  <p>To Add your Google Map you must first plot your address by searching</p>
  <p>
    <input id="address" type="textbox" value="" placeholder="Search For Your Address">
    <input type="button" value="Plot Your Address" onclick="codeAddress()">
  </p>

  <div id="latlong">
      <p>Office Name: <input size="20" type="text" id="input_15_92" name="ofn" ></p>
      <p>Latitude: <input size="20" type="text" id="input_15_169" name="lat" ></p>
      <p>Longitude: <input size="20" type="text" id="input_15_167" name="lng" ></p>
    </div>

  <div id="map_canvas" style="width: 600px; height: 400px"></div>

  <p>To Add your Google Map you must first plot your address by searching</p>
  <p>
    <input id="address2" type="textbox" value="" placeholder="Search For Your Address">
    <input type="button" value="Plot Your Address" onclick="codeAddress()">
  </p>

  <div id="latlong">
      <p>Office Name: <input size="20" type="text" id="input_16_92" name="ofn" ></p>
      <p>Latitude: <input size="20" type="text" id="input_16_169" name="lat" ></p>
      <p>Longitude: <input size="20" type="text" id="input_16_167" name="lng" ></p>
    </div>

  <div id="map_canvas2" style="width: 600px; height: 400px"></div>

</body>
</html>

I know in my current javascript above I am missing code to populate the fields for the second map which should look something like this, But I am not sure where to place them

document.getElementById("input_16_169").value = marker.getPosition().lat();
document.getElementById("input_16_167").value = marker.getPosition().lng();
document.getElementById("input_16_92").value = address;

////

2) The second question is to do with the zoom. I see I can set my zoom level zoom: 10, at the start of the code which gives the zoom level for the map. I was wondering if I can have a different zoom for when a result is found i.e. after the user searches as I would like that to be a little bit more zoomed in!

Thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would suggest a different markup.

    Wrap the inputs and the map into a form, like this:

      <form style="width:220px;float:left;">
      <input name="address" value="" placeholder="Search For Your Address"/>
      <input type="button" value="Plot Your Address" onclick="codeAddress(this.form)"/>
      <input size="20" type="text"  name="ofn" />
      <input size="20" type="text" name="lat" />
      <input size="20" type="text"  name="lng" />
      <div class="map_canvas" style="width: 200px; height: 200px"></div>
  </form>

    The benefits:

    you now will be able to load the maps dynamic, without knowledge of the number of maps. you may select them easily with document.querySelectorAll('form>.map_canvas'); , the resulting nodeList you may use for creating the maps within a loop:

        var maps=document.querySelectorAll('form>.map_canvas');
    for(var i=0;i<maps.length;++i)
    {
        maps[i].parentNode.map=new google.maps.Map(maps[i], mapOptions);
    }

    Note: Instead of creating the global map-variables the maps will be stored as a property of the form, so you may access the map later by using formElement.map

    Also note the call of codeAddress() , it now has a argument this.form, it refers to the form that the clicked button belongs to.

    By using this argument you are able to access the inputs and the map inside the desired form:

    function codeAddress(form) {

    var address=form.address.value
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {

    form.map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: form.map,
        position: results[0].geometry.location
    });
    form.map.setZoom(18);
    form.lat.value = marker.getPosition().lat();
    form.lng.value = marker.getPosition().lng();
    form.ofn.value = address;

  } else {
    alert('Geocode was not successful for the following reason: ' + status);
  }
});

    }

    The zoom may be set by using the setZoom-method af a map(it’s already implemented in my suggestion)

    Demo: http://jsfiddle.net/doktormolle/Tpgdd/

    • 0