Multiple addresses in google maps? And overlay

Question

I am about to create a google map script, where i can set locations (not lat and lng) but locations in the google map, so it shows a picture on that location, and when mouseover it should open a overlay with picture + text.

I have the script to show 1 address, but how to implementate more than 1? Like an array ["London", "Odense C, Danmark", "something"] ?

And the pointer should be a image (costum image) and not the point of default google map. I've tried this, but it doesn't show anything. Please help me!

$(function () {
var geocoder = new google.maps.Geocoder();

function getPosition(address) {
    geocoder.geocode({
        "address": address
    }, function (results, status) {

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

            //Create the popup etc..
            var contentString = '<div id="
            content "><div id="
            siteNotice "></div><h2 id="
            firstHeading " class="
            firstHeading ">dsfdf</h2><div id="
            bodyContent "><p>Some text in here</p></div></div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            google.maps.event.addListener(marker, "mouseover", function () {
                infoWindow.open(map, marker);
            });


            return results[0].geometry.location;
        }
    });
}




if ($("div#map").length) {
    // google map

    var name = "Stolen property";
    var address = "Odense, Denmark";


    geocoder.geocode({
        "address": "Odense Danmark"
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 15,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false,
                disableDefaultUI: true
            });

            //Create 1
            var marker = new google.maps.Marker({
                position: getPosition("Brogade Odense Danmark"),
                map: map,
                title: name
            });

            //Create two!
            var marker = new google.maps.Marker({
                position: getPosition("Skibhusvej Odense Danmark"),
                map: map,
                title: name
            });

        }


        //Add it!


    });
}
});

Answer 1

You will need to build a loop to go through and geocode for each address that you have in your array. See the code snippet asked in the question here: Google Map V3 : Only some markers are displayed

You can also set a custom image for a marker by using the marker's "icon" property:

var image = 'images/iconParcelB25.png';

var marker = new google.maps.Marker({
    position:latLng,
    map:map,
    title:projName,
    icon:image
});

This snippet refers to a local PNG in the assets of the web site, but it also works for images that are remotely available (i.e. http://www.example.com/images/theImage.jpg).

EDIT: I am not sure what you mean by "add an overlay with an image and text." Do you mean an infowindow? This is a more typical use-case for this kind of thing.

EDIT: This is what I would do:

Get your descriptive location/address into a variable, maybe in a loop:

var location = addresses[i];

Create a new infowindow, referring to the location and whatever other text you need in the infoWindow. If you want to include custom images/text, put it in your markup for the content string:

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">+ location +</h2>'+
    '<div id="bodyContent">'+
    '<p>Some text in here</p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
}); 

Create a new marker, setting the mouseOver event to open the infoWindow and the mouseOut event to close it. Also, keep in mind, that you will want to set the icon to a custom image. Here I am using a latlng, but in your case, you would set the position to the location geometry output from the geocoding service, as you do in your code snippet.

var image = 'images/iconParcelB25.png';

        var marker = new google.maps.Marker({
            position:latLng,
            map:map,
            title:projName,
            icon:image
        });

//sets up the mouseover listener
google.maps.event.addListener(marker, 'mouseover', function() {
    infoWindow.open(map,marker);
});

//sets up the mouseout listener
google.maps.event.addListener(marker, 'mouseout', function() {
    infoWindow.close(map,marker);
});