How to add additional map markers to Google Maps t

Question

Suppose I have 2 office locations which I want to use for my contact page. And I want to have an embedded Google Map that shows both of those locations. In Google Maps itself, I'm able to display both map markers. However, the embed HTML code only uses the first address entered.

Question 1: Is it possible to change the HTML embed code that Google provides to display a map marker for the second location?

Question 2 (only if answer to above is "yes"): How?

Here is some sample embed code Google gives:

<iframe width="920" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ca/maps?hl=en&amp;client=safari&amp;q=33+Victoria+St.,+Toronto,+ON+M5C+3A1&amp;ie=UTF8&amp;hq=&amp;hnear=33+Victoria+St,+Toronto,+Ontario+M5C+3A1&amp;gl=ca&amp;t=m&amp;ll=43.536603,-79.796448&amp;spn=0.696882,2.526855&amp;z=9&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.ca/maps?hl=en&amp;client=safari&amp;q=33+Victoria+St.,+Toronto,+ON+M5C+3A1&amp;ie=UTF8&amp;hq=&amp;hnear=33+Victoria+St,+Toronto,+Ontario+M5C+3A1&amp;gl=ca&amp;t=m&amp;ll=43.536603,-79.796448&amp;spn=0.696882,2.526855&amp;z=9&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Answer 1

Try saving your office locations to Google My Maps and then providing the link address of the map in the href of the iframe

Answer 2

You can achieve this another way, by using My Places. Here are the steps to achieve this:

1. In Google Maps, notice the My Places Button beside Get Directions - click on that.
2. Click on Create a Map in the Left Panel
3. Specify a Title and Description (something about your offices maybe), then hit Save.
4. Now search for your two locations as you would in the search bar.
5. Click on Save to map in the bottom of the result listing on the left panel, and specify the map you want to save it to (should be the title you set earlier).
6. Do that for both locations, then use the Embed tool like you would normally to embed your map.

Answer 3

I am not sure about the answer to your question, but the Google API is pretty convenient and relatively easy to learn.

Creating a marker really only needs 3 lines, new marker, position of marker, and the map you are using. Creating a map with multiple markers is relatively short too in JS. Here is a sample.

function initialize() {
    var myOptions = {
        zoom: 4,
        center: new google.maps.LatLng(-25.363882, 131.044922),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
    });
    var marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(35, 96),
        map: map,
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

Using the API will also allow you to further add more features to your map if needed in the future. Eventually, you may want to have the markers display their location and perhaps even get directions to one of the markers. And Google has already written all this code that is available to anyone.

Here is a little more advanced example using the fusion tables API, but there are a lot of cool features that you can use besides just markers. https://developers.google.com/fusiontables/docs/samples/infowindow_driving_directions