Posted By

marzsman on 05/27/11

Tagged

google

Versions (?)

Last Edited at 05/27/11 03:53am

Statistics

Viewed 641 times

Favorited by 0 user(s)

Related snippets

Full Google maps

/ Published in: JavaScript

A complete Google maps example with multiple markers and infowindows

Highlighted TextExpand

<script type="text/javascript">
var network = [];
network.push({title:"{title}",address:"<div class='infowindow'><h3>{title}</h3>{network_street}<br/> - {network_zip} {network_city}<br/>{network_country}<a href='{network_url}'>{network_url}</a></div>",lat:{network_lat},lng:{network_lng}});
</script>
//////////////////////////////
var map,markers=[],bounds,infowindow;
function initialize() {
	var myLatlng = new google.maps.LatLng(51.05866,3.713379);
	var myOptions = {
		zoom: 8,
		center: myLatlng,
		streetViewControl: false,
		scrollwheel:false,
        mapTypeId: google.maps.MapTypeId.ROADMAP  
	}
	map = new google.maps.Map(document.getElementById("gmap"), myOptions);
        infowindow = new google.maps.InfoWindow();
    bounds = new google.maps.LatLngBounds();
    mapReady();
}
function mapReady() {
    for(var i=0;i<network.length;i++){
        addPoint(network[i]);
    }
    map.setCenter( bounds.getCenter(), map.fitBounds(bounds));
}
function addPoint(data) { 
    var point = new google.maps.LatLng(data.lat,data.lng);
    var marker = new google.maps.Marker({
        position: point,
        map: map,
        title: data.title
    });
    markers.push(marker);
    bounds.extend(point);
    
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
      infowindow.setContent(data.address);
    });
}
function loadScript() {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
	document.body.appendChild(script);
}
window.onload = loadScript;

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.