如何使超链接使用位置标记和信息更新嵌入式Google地图

Question

I've seen similar questions on here unanswered or they require a page refresh, I'm hoping I can get an answer from someone more familiar with the Google Maps API than I am, and I'd like this to work without having to refresh the page.

I have an embedded Google map on a webpage and I have a list of locations in the HTML of the webpage.

I would like it so that when a visitor clicks one of the locations it shows that location on the embedded map.

Sounds simple enough right? I have been reading documentation for 2 days on the API, and I can't seem to find what I am looking for.

I'm anticipating being able to make a call to a JS function onClick of the link that will set a location/marker/InfoBox. All I basically need to know is how to communicate with the embbeded map via a link. I can sort out the infoBox and the rest myself.

Thanks a ton for reading!

In case you were wondering, I am using the following JS to embed the google map:

function initialize() {

    var mapOptions = {
        zoom: 8,
        panControl: false,
        rotateControl: false,
        scaleControl: false,
        streetViewControl: false,
        center: new google.maps.LatLng(51.004106,-114.135442),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }   
    var map = new google.maps.Map(document.getElementById("header"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

You'll probably want to create a function to add the marker like this:

function addMarker(map, lat, long, title, popupHtml) {
    var latLong = new google.maps.LatLng(lat, long);
    var markerOpts = { position: latLong, map: map, title: title };
    var marker = new google.maps.Marker(markerOpts);
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(popupHtml);
        infoWindow.open(map, marker);
    });
}

Then in the initialize function do something to attach the function to your links.