Solved

Google Map with markers not displaying

Posted on 2014-10-23
2
158 Views
Last Modified: 2014-10-24
Hi, I have the following code that should display a map with the markers on it of 5 local businesses.

I've played around for a while but nothing is appearing at all, even alerts()?

Anyone able to take a look and correct any squiffy code please?

Regards
Neil
        
        <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        
		var infowindow = null;
			
    
		var centerMap = new google.maps.LatLng(51.421196,0.392989);

		var myOptions = {
			zoom: 7,
			center: centerMap,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}

		var map = new google.maps.Map(document.getElementById("map_canvas_local_businesses"), myOptions);
	
		setMarkers(map, sites);
		
		infowindow = new google.maps.InfoWindow({
			content: "loading..."
		});						      
		
		var sites = [["Dok Electrical","51.373516","0.576815","Elmfield, Gillingham, Kent"], ["Bee Bright Tuition","51.430527","0.399807","Rochester Road, Gravesend, Kent"], ["M and D Plasterers","51.315117","0.393089","Chapel Close, Ryarsh, West Malling, Kent"], ["Halloween Goodies Bags","51.422668","0.376006","Gloucester Road, Gravesend, Kent"], ["Mike's Kitchens","51.440453","0.342623","Plane Avenue, Northfleet, Gravesend, Kent"]];		
        function setMarkers(map, markers) {
			    
            for (var i = 0; i < markers.length; i++) {
                var sites = markers[i];
                var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
				 
                var marker = new google.maps.Marker({
                    position: siteLatLng,
                    map: map,
                    title: sites[0],
                    zIndex: i,
                    html: '<div style="min-height:90px;min-width:180px;text-align:right;"><h3>test</p><div>'
                });
				
				
                var contentString = "Some content";
    
                google.maps.event.addListener(marker, "click", function () {
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
            }
        }
		
		 
 

    </script>
    

	<div id="map_canvas_local_businesses" style="width:600px;height:400px;"></div>

Open in new window

0
Comment
Question by:Neil Thompson
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40400460
Move your script/s after the map div - you are trying to initiate the map before it exists

As for the markers - nothing is defined for sites
0
 
LVL 3

Author Closing Comment

by:Neil Thompson
ID: 40401278
Annoyingly simple. Thanks Gary :)
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Interview question Javascript, database 12 58
how can i remove string values 2 29
how to avoid redundand ajax calls 5 28
Scroll 5 news at a time. 4 25
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question