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.

using a regular counter loop for user to input own info to a place marker

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

kwood30 Peon

Messages:

12

Likes Received:

0

Best Answers:

0

Trophy Points:

1

#1

Rights guys ignore my last two post as I have manage to sort them out for myself, but this one is a struggle. I seem to of not had much input on my last posts and not sure why. I am trying to allow a user to input their own info in to their place make, say a reference number for example, but am struggling to do so. I believe the way for this is a regular counter loop, but i am not sure how and where to put it and even if that is the right thing to do. Can anyone help me with this please. The code below is what I have managed to do so far.

<!DOCTYPE html>
<html>

<head>


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map) {
var infowindow = new google.maps.InfoWindow({
content: html
});
var marker = new google.maps.Marker({
map: map,
position: latlng
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
markers.push(marker);
}

declare namespace
var up206b = {};

var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
for (var i = 0; i < markers.length; i++) {
markers.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
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);
createMarker(results[0].geometry.location, address, map);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}

</script>
</head>
<body onload="up206b.initialize()">

<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>

</body>
</html>

kwood30, Feb 20, 2016 IP
qwikad.com Illustrious Member Affiliate Manager

Messages:

7,151

Likes Received:

1,656

Best Answers:

29

Trophy Points:

475

#2

Use the insert function (choose "code") instead of just copying and pasting your code. Otherwise it's hard to figure out what's going on there.

I placed your code in jsfiddle and I am not sure if anything is working there at all: https://jsfiddle.net/ddsty2ts/1/

Do you have an example (like from another website) of what it should be like?

qwikad.com, Feb 20, 2016 IP
kwood30 Peon

Messages:

12

Likes Received:

0

Best Answers:

0

Trophy Points:

1

#3

This might sound stupid but not sure how to do that. I have written all this code in Dreamweaver on a html page and when testing it through a browser it works. What my code is currently doing i allowing a user to input two separate postcodes and submit them to place the two marks at the same time. Then when you mouse over the markers it show an info box with the postcode in it. What I now want to do is allow the user to insert their own info that then can be submitted to display on the marker when they mouse over it.

kwood30, Feb 20, 2016 IP
kwood30 Peon

Messages:

12

Likes Received:

0

Best Answers:

0

Trophy Points:

1

#4

I do not have an example as I have done this all myself. I have built is in Dreamweaver so if you have an application like that you can copy and paste my code and it will display all my workings through your browser. It all currently works to how i want it, I just now want it to do what I have asked help for. Please can someone give me some pointers as I am completely stumped.

kwood30, Feb 22, 2016 IP

ketting00 Well-Known Member

Messages:: 772

Likes Received:: 27

Best Answers:: 3

Trophy Points:: 128

It works for me.
Just remove or put comment to this:


declare namespace

Code (markup):

What is this supposed to do.
However, it only works for the first submit.
If you want it work repeatedly you should change:


for (var i = 0; i < markers.length; i++) {
    markers.setMap(null);
}
markers = [];

Code (markup):


for (var i = 0; i < markers.length; i++) {
    markers = [];
}

Code (markup):

Here's the full code:


var markers = [];

function createMarker(latlng, html, map) {
    var infowindow = new google.maps.InfoWindow({
        content: html
    });
    var marker = new google.maps.Marker({
        map: map,
        position: latlng
    });
    marker.addListener('mouseover', function() {
        infowindow.open(map, this);
    });
    marker.addListener('mouseout', function() {
        infowindow.close();
    });
    markers.push(marker);
}

// declare namespace
var up206b = {};

var map;

function trace(message) {
    if (typeof console != 'undefined') {
        console.log(message);
    }
}

up206b.initialize = function() {
    var latlng = new google.maps.LatLng(52.136436, -0.460739);
    var myOptions = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
    for (var i = 0; i < markers.length; i++) {
        markers = [];
    }
   
    var bounds = new google.maps.LatLngBounds();
    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);
                    createMarker(results[0].geometry.location, address, map);
                    bounds.extend(results[0].geometry.location);
                    map.fitBounds(bounds);
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }
    });
}

Code (markup):

ketting00, Feb 22, 2016 IP

kwood30 Peon

Messages:

12

Likes Received:

0

Best Answers:

0

Trophy Points:

1

#6

Thank you

kwood30, Feb 24, 2016 IP

(You must log in or sign up to reply here.)

Log in or Sign up

Advertising (learn more)

using a regular counter loop for user to input own info to a place marker

kwood30 Peon

qwikad.com Illustrious Member Affiliate Manager

kwood30 Peon

kwood30 Peon

ketting00 Well-Known Member

kwood30 Peon

Log in or Sign up

Advertising (learn more)

using a regular counter loop for user to input own info to a place marker

kwood30 Peon

qwikad.com Illustrious Member Affiliate Manager

kwood30 Peon

kwood30 Peon

ketting00 Well-Known Member

kwood30 Peon

Useful Searches