0

Question: how can I change my code, so I can use normal human addresses, and get them 'marked' on the map.

Ok - I've been working on this for a while and I cant seem to get it right. I have the following code which displays custom markers on a map - which works 100% correctly:

function LoadMap() {
    var locations = new Array(
        [34.01843,-118.491046], [34.006673,-118.486562], [34.009714,-118.480296]
    );

    var markers = new Array();

    var mapOptions = {
        center: new google.maps.LatLng(34.019000, -118.455458),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    };

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $.each(locations, function(index, location) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[0], location[1]),
            map: map
        });

        var myOptions = {
            content: '<div class="infobox"><div class="image"><img src="http://html.realia.byaviators.com/assets/img/tmp/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">1041 Fife Ave</a></div><div class="area"><span class="key">Area:</span><span class="value">200m<sup>2</sup></span></div><div class="price">€450 000.00</div><div class="link"><a href="detail.html">View more</a></div></div>',
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-146, -190),
            zIndex: null,
            closeBoxURL: "",
            infoBoxClearance: new google.maps.Size(1, 1),
            position: new google.maps.LatLng(location[0], location[1]),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };
        marker.infobox = new InfoBox(myOptions);
        marker.infobox.isOpen = false;

        var myOptions = {
            draggable: true,
            content: '<div class="marker"><div class="marker-inner"></div></div>',
            disableAutoPan: true,
            pixelOffset: new google.maps.Size(-21, -58),
            position: new google.maps.LatLng(location[0], location[1]),
            closeBoxURL: "",
            isHidden: false,
            enableEventPropagation: true
        };
        marker.marker = new InfoBox(myOptions);
        marker.marker.open(map, marker);
        markers.push(marker);

        google.maps.event.addListener(marker, "click", function (e) {
            var curMarker = this;

            $.each(markers, function (index, marker) {
                // if marker is not the clicked marker, close the marker
                if (marker !== curMarker) {
                    marker.infobox.close();
                    marker.infobox.isOpen = false;
                }
            });

            if(curMarker.infobox.isOpen === false) {
                curMarker.infobox.open(map, this);
                curMarker.infobox.isOpen = true;
                map.panTo(curMarker.getPosition());
            } else {
                curMarker.infobox.close();
                curMarker.infobox.isOpen = false;
            }

        });
    });
}

What I want to do is change "var locations" from lat/long to json 'human' addresses - from this:

var locations = new Array(
        [34.01843,-118.491046], [34.006673,-118.486562], [34.009714,-118.480296]
    );

to something like this:

var locations = JSON.parse('[{"address":"New Street, Salisbury, UK","content":"hello world from salisbury","status":"live"},{"address":"86000 Poitiers, France","content":"hello world from poitiers"},{"address":"66000 Perpignam, France","content":"hello world from perpignam"}]');

So obviously I need to somehow geocode these addresses prior to using them in google.maps.Marker position - but I cant seem to work out how.

I tried changing the marker code to this:

    geocoder.geocode( {'address': '1 George St Sydney NSW 2000 Australia' },
              function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {

                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                        map: map,
                        icon: 'transparent.png'
                    });
                } 
                else {
                  document.getElementById("text_status").value = status;
                }
              }
            );

But no markers are rendered :(

Any help/advice would be greatly appreciated.

Laurence
  • 58,936
  • 21
  • 171
  • 212
  • What does `transparent.png` look like? [Your code displays a marker for me without that](http://www.geocodezip.com/v3_simpleMap_geocoderAddress.html) – geocodezip Oct 10 '13 at 14:09
  • its just a local png file. It works for me (I modified the HTML link in the code above to remove my domain name). I'll remove it from the code above - its not needed. Thanks – Laurence Oct 10 '13 at 14:12
  • Then perhaps compare your geocoder code with the [working version](http://www.geocodezip.com/v3_simpleMap_geocoderAddress.html) I provided and check for javascript errors. – geocodezip Oct 10 '13 at 14:24
  • Note that the geocoder will be OK for 3 addresses (as long as you understand and account for its asynchronous behavior). If you are planning on displaying lots of markers, it is not a good solution (particularly if you have the coordinates available). Search SO for "geocoder OVER_QUERY_LIMIT". – geocodezip Oct 10 '13 at 14:29
  • thanks @geocodezip - I was actually going to do like 30 markers. I've just read http://stackoverflow.com/q/2419219/1317935 (found using your search) - and I think I'm going to use my original lat/lng code, and pre determine the lat/lng when the address is created + stored in the database. Thanks!!! – Laurence Oct 10 '13 at 14:33

0 Answers0