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&client=safari&q=33+Victoria+St.,+Toronto,+ON+M5C+3A1&ie=UTF8&hq=&hnear=33+Victoria+St,+Toronto,+Ontario+M5C+3A1&gl=ca&t=m&ll=43.536603,-79.796448&spn=0.696882,2.526855&z=9&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.ca/maps?hl=en&client=safari&q=33+Victoria+St.,+Toronto,+ON+M5C+3A1&ie=UTF8&hq=&hnear=33+Victoria+St,+Toronto,+Ontario+M5C+3A1&gl=ca&t=m&ll=43.536603,-79.796448&spn=0.696882,2.526855&z=9&iwloc=A&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
You can achieve this another way, by using My Places
. Here are the steps to achieve this:
My Places
Button beside Get Directions
- click on that.Create a Map
in the Left PanelSave 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).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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With