Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

google maps v3, several maps on same page

5:57 pm on Dec 3, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2003
posts: 1308
votes: 0

Think Im going nut, been trying almost everything, managed to get it work in firefox, but when checked chrome there were no markers.

I have 3 google maps on the same page using v2, now I need https pages so I must upgrade to v3.
However just can figure out how to have several on same page.
Any ideas please?
This is what I have for one map, I need 3 of this on the same page

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function start() {
window.onload = start;
window.onload = start;
<div id="map_canvas" style="width: 580px; height: 400px"></div>

<script type="text/javascript">
var map = null;
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(36.51308543049258, -4.886341094970703),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById("map_canvas"),

google.maps.event.addListener(map, 'click', function() {

// Add markers to the map
// Set up three markers with info windows

var point = new google.maps.LatLng(36.50856685143835, -4.866085052490234);
var marker = createMarker(point,'<div style="width:240px">Text here <a href="link here">Link<\/a><\/div>')

var point = new google.maps.LatLng(36.509653404078676, -4.91289496421814);
var marker = createMarker(point,'<div style="width:240px"Text here <a href="link here">Link<\/a><\/div>')

var point = new google.maps.LatLng(36.508601,-4.875945);
var marker = createMarker(point,'<div style="width:240px">Text here<a href="link here">Link<\/a><\/div>')


var infowindow = new google.maps.InfoWindow(
size: new google.maps.Size(150,50)

function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5

google.maps.event.addListener(marker, 'click', function() {

8:11 pm on Dec 8, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 16, 2004
votes: 0

figure out how to have several on same page. Any ideas please?

Would it be good enough to <IFRAME> them so they "appear" on one page?

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members