mouseover display in another 'DIV'

Discussion in 'JavaScript' started by kwood30, Feb 19, 2016.

  1. #1
    Hi,
    Please see my coding so far. I am trying to create so that when the mouse runs over the placed marker and displays the info, it will also display that info in another box (<div></div>) on the same page. I can't seem to get a working solution. Can anyone help or have suggestions please?

    <!DOCTYPE html>
    
    <!-- Google Maps and Places API -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    
    <script type="text/javascript">
    
    
    var up206b = {};
    
    var map;
    
    function trace(message)
    {
    if (typeof console != 'undefined')
    {
    console.log(message);
    }
    }
    
    up206b.initialize = function()
    {
    var latlng = new google.maps.LatLng(34.070264, -118.4440562);
    var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    
    var geocoder = new google.maps.Geocoder();
    
    up206b.geocode = function()
    {
    
    var addresses = [ $('#address').val(), $('#address2').val()];
    
    addresses.forEach(function(address){
    if(address){
    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
    });
    }
    else
    {
    alert("Geocode was not successful for the following reason: " + status);
    }
    });
    }
    });
    }
    
    </script>
    
    <div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
    <h1 align="center">Map Search</h1>
    
    <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >
    
    <form >
    <br>
    Location 1 <input type="text" id="address">
    <br>
    <br>
    Location 2
    <input type="text" id="address2">
    <br>
    <br>
    <input type="button" value="Submit" onClick="up206b.geocode()">
    </form>
    </div>
    
    </div>
    
    <div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
    Code (markup):

     
    Last edited by a moderator: Mar 11, 2016
    kwood30, Feb 19, 2016 IP
  2. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #2
    What exactly is not working with this code? Is the map not showing?

    I mean I recreated the code and I have a working map with two markers. I had to change few things though. To add an app key and to call the initialize method.
     
    Blizzardofozz, Mar 11, 2016 IP