
December 3rd, 2012, 02:33 AM
|
|
Contributing User
|
|
Join Date: Sep 2004
Location: Marbella, Spain
Posts: 383
Time spent in forums: 6 Days 8 h 41 m 34 sec
Reputation Power: 0
|
|
|
Google maps, 3 maps on same page
Hi,
I have google maps on my site 2v, however I need to use https: so I am trying to change to v3.
I found out how to do the map, however I cant manage to get more than one on same page.
This is one map, I need 3 of those, all with diferent maps locations,
any ideas?
Code:
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<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>
|