Title: Google Maps API v3   JavaScript & HTML
Last modified: August 21, 2016

---

# Google Maps API v3 JavaScript & HTML

 *  [JAYMICHAELIVING](https://wordpress.org/support/users/jaymichaeliving/)
 * (@jaymichaeliving)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/google-maps-api-v3-javascript-html/)
 * I just coded a Google Map API v3 and now I want to embed it in to my website.
   The Map will appear on 5+ pages, yet each page will have a different set of plots.
 * First thing is first, here is a link to the page that I want to eventually put
   the map: [http://www.flatschicago.com/edgewater-chicago/apartments](http://www.flatschicago.com/edgewater-chicago-apartments/)
   The map is going to go in the blank space on the right side of the page (marked
   with a shadow at the bottom of the white box).
 * Here is the code for the Google Map API v3 that I coded up. Where do I put this
   code in order for it to appear in the box from the above page? This code works
   perfectly in JSFiddle, but when I try to embed the code in to the TEXT box & 
   Custom CSS, nothing shows; here is the page I placed the code to “test it out”:
   [http://www.flatschicago.com/edgewater-map/](http://www.flatschicago.com/edgewater-map/)
 * API Code:
 *     ```
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
           <script>
       var map;
       var edgewater = new google.maps.LatLng(41.987245, -87.661233);
   
       var MY_MAPTYPE_ID = 'custom_style';
   
       function initialize() {
   
         var featureOpts = [
   
       {
       stylers: [
               { hue: '#3b3d38' },
               { visibility: 'simplified' },
               { gamma: 0.5 },
               { weight: 0.5 }
             ]
           },
           {
       featureType: 'water',
            stylers: [
               { color: '#3b3d38' }
             ]
           },
            {
       featureType: 'road',
             elementType: 'labels.text.fill',
             stylers: [
               { color: '#3b3d38' },
               { visibility: 'on' }
             ]
           },
                    {
       featureType: 'transit',
             stylers: [
               { saturation: '#FFFFFF' },
               { visibility: 'on' }
             ]
           },
                            {
       featureType: 'transit.station.bus',
             stylers: [
               { saturation: '#FFFFFF' },
               { visibility: 'on' }
             ]
           },
   
         ];
   
         var mapOptions = {
           zoom: 13,
           center: edgewater,
           mapTypeControlOptions: {
             mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
           },
           mapTypeId: MY_MAPTYPE_ID
         };
   
         map = new google.maps.Map(document.getElementById('map-canvas'),
             mapOptions);
   
         var styledMapOptions = {
           name: 'Custom Style'
         };
   
         var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
   
         map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
   
               var infowindow = new google.maps.InfoWindow();
   
       var latlng1 = new google.maps.LatLng(41.993340, -87.657301);
       var marker1 = new google.maps.Marker({
               position:latlng1,
               map:map,
               icon: 'http://i41.tinypic.com/2yla5og.png'});
       google.maps.event.addListener(marker1, 'click',
           function(){
               infowindow.close();//hide the infowindow
               infowindow.setContent('<a href="http://www.flatschicago.com/edgewater-chicago-apartments/6134-kenmore/" target="_blank">No. 6134 Kenmore™</a>');//update the content for this marker
               infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
           }
       );
       var latlng2 = new google.maps.LatLng(41.986071, -87.658206);
       var marker2 = new google.maps.Marker({
               position:latlng2,
               map:map,
               icon: 'http://i41.tinypic.com/2yla5og.png'});
   
       google.maps.event.addListener(marker2, 'click',
           function(){
               infowindow.close();//hide the infowindow
               infowindow.setContent('<a href="http://www.flatschicago.com/edgewater-chicago-apartments/5718-winthrop/" target="_blank">No. 5718 Winthrop™</a>');//update the content for this marker
               infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
           }
       );
               var latlng3 = new google.maps.LatLng(41.980422, -87.657521);
       var marker3 = new google.maps.Marker({
               position:latlng3,
               map:map,
               icon: 'http://i41.tinypic.com/2yla5og.png'});
   
       google.maps.event.addListener(marker3, 'click',
           function(){
               infowindow.close();//hide the infowindow
               infowindow.setContent('<a href="http://www.flatschicago.com/edgewater-chicago-apartments/5411-winthrop/" target="_blank">No. 5411 Winthrop™</a>');//update the content for this marker
               infowindow.open(map, marker3);//"move" the info window to the clicked marker and open it
           }
       );
               var latlng4 = new google.maps.LatLng(41.974950, -87.657366);
       var marker4 = new google.maps.Marker({
               position:latlng4,
               map:map,
               icon: 'http://i41.tinypic.com/2yla5og.png'});
   
       google.maps.event.addListener(marker4, 'click',
           function(){
               infowindow.close();//hide the infowindow
               infowindow.setContent('<a href="http://www.flatschicago.com/edgewater-chicago-apartments/5051-kenmore/" target="_blank">No. 5051 Kenmore™</a>');//update the content for this marker
               infowindow.open(map, marker4);//"move" the info window to the clicked marker and open it
           }
       );
   
       }
   
       google.maps.event.addDomListener(window, 'load', initialize);
   
           </script>
         <body onload='intialize()'>
           <div id="map-canvas"  style='width:310px; height:537px;'></div>
         </body>
       ```
   
 * CSS:
 *     ```
       #map_canvas {
               height: 100%;
               margin: 0px;
               padding: 0px
             }
       ```
   
 * Any help would be greatly appreciated. I have gotten this close, so hopefully
   we can resolve this issue.
 * Thanks in advance.

The topic ‘Google Maps API v3 JavaScript & HTML’ is closed to new replies.

## Tags

 * [html](https://wordpress.org/support/topic-tag/html/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * 0 replies
 * 1 participant
 * Last reply from: [JAYMICHAELIVING](https://wordpress.org/support/users/jaymichaeliving/)
 * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/google-maps-api-v3-javascript-html/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics