Can't get this to work with Google Maps
-
I have a WordPress page that generates the following code. Normally everything inside the inner <div> is just part of a <td> in a table and it displays fine that way.
So I thought I’d try reorganizing the code according to your recommended structure for inline content. When I do it this way, the link properly opens the lightbox, but only a portion of the map appears, in the upper left corner. I’ve tried playing with different map sizes and so on, but the output never quite looks correct. Do you have some ideas about what I might be doing wrong, and how I might fix the problem?
Thanks,
David McLeod
<td> <div style="display:none" class="fancybox-hidden"><div id="gmap-display" class="hentry" style="width:400px;height:300px;"> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script><script type = "text/javascript">jQuery(document).ready(function(){var mapOptions={zoom:5,controls:[],center:new google.maps.LatLng(45.5265607,-117.906483),mapTypeId:google.maps.MapTypeId.ROADMAP};var googleMap=new google.maps.Map(document.getElementById("googleMap"),mapOptions);var geocoder=new google.maps.Geocoder();var address0 = "";geocoder.geocode({"address":"2203 Hastings Drive, #21, Belmont CA, 94002"},function(results,status){if(status == google.maps.GeocoderStatus.OK){address0 = results[0].geometry.location;var marker0 = new google.maps.Marker({position:address0,map:googleMap,clickable:true,icon:"https://google.com/mapfiles/kml/paddle/blu-circle.png"});var infowindow0=new google.maps.InfoWindow({content:"<div class=\"infoWindow\">[David M.] 2203 Hastings Drive, #21, Belmont CA, 94002</div>"});google.maps.event.addListener(marker0,"click",function(){infowindow0.open(googleMap,marker0);});}});var address1 = "";geocoder.geocode({"address":"10210 99th St, Edmonton, Alberta"},function(results,status){if(status == google.maps.GeocoderStatus.OK){address1 = results[0].geometry.location;var marker1 = new google.maps.Marker({position:address1,map:googleMap,clickable:true,icon:"https://google.com/mapfiles/kml/paddle/red-circle.png"});var infowindow1=new google.maps.InfoWindow({content:"<div class=\"infoWindow\">[David M.] 10210 99th St, Edmonton, Alberta</div>"});google.maps.event.addListener(marker1,"click",function(){infowindow1.open(googleMap,marker1);});}});var address2 = "";geocoder.geocode({"address":"66 4th st, San Mateo, California"},function(results,status){if(status == google.maps.GeocoderStatus.OK){address2 = results[0].geometry.location;var marker2 = new google.maps.Marker({position:address2,map:googleMap,clickable:true,icon:"https://google.com/mapfiles/kml/paddle/grn-circle.png"});var infowindow2=new google.maps.InfoWindow({content:"<div class=\"infoWindow\">[David M.] 66 4th st, San Mateo, California</div>"});google.maps.event.addListener(marker2,"click",function(){infowindow2.open(googleMap,marker2);});}});});</script><div id="googleMap" class="msmw_map" style="width:400px;height:300px;"></div> </div></div> <a href="#gmap-display">View Google Map</a> </td>
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- The topic ‘Can't get this to work with Google Maps’ is closed to new replies.