homepage Welcome to WebmasterWorld Guest from 107.21.186.38
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library : Charter : Moderators: whoisgregg

JavaScript and AJAX Forum

    
google maps v3, several maps on same page
helenp




msg:4524580		 5:57 pm on Dec 3, 2012 (gmt 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() {
initialize();
}
window.onload = start;
window.onload = start;
<div id="map_canvas" style="width: 580px; height: 400px"></div>

<script type="text/javascript">
//<![CDATA[
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"),
myOptions);

google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});

// 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() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}

</script>

 

lexipixel




msg:4526146		 8:11 pm on Dec 8, 2012 (gmt 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?
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved