1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

mouseover display in another 'DIV'

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

0
  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